html项目符号怎么设成大圆点,HTML项目符号超出div[重复]

提问者：小点点

HTML项目符号超出div[重复]

我正在尝试有一个HTML卡与一个标题，一个图像在右边和一个项目符号列表在左边。 但是，子弹列表走在卡的外面。 如何使卡片的div适应其内容的长度？

下面是代码:

null.card {

/* Add shadows to create the "card" effect */

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

transition: 0.3s;

padding: 20px;

width: 100%;

}

/* On mouse-over, add a deeper shadow */

.card:hover {

box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);

}

.card_excerpt {

float: right;

width: 50%;

}

.card_image {

width: 40%;

}

CARD TITLE

• Bullet 1
• Bullet 2
• Bullet 3
• Bullet 4
• Bullet 5
• Bullet 6
• Bullet 7

null

共3个答案

匿名用户

您可以将clear:both添加到.card_image中

null.card {

/* Add shadows to create the "card" effect */

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

transition: 0.3s;

padding: 20px;

width: 100%;

}

/* On mouse-over, add a deeper shadow */

.card:hover {

box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);

}

.card_excerpt {

float: right;

width: 50%;

}

.card_image {

width: 40%;

clear:both;

}

CARD TITLE

• Bullet 1
• Bullet 2
• Bullet 3
• Bullet 4
• Bullet 5
• Bullet 6
• Bullet 7

匿名用户

另外，如果你可以修改你的卡片结构，你可以使用flexbox而不是float来定位你的内容。

null.card {

/* Add shadows to create the "card" effect */

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

transition: 0.3s;

padding: 20px;

width: 100%;

}

.card_inner {

display:flex;

}

img {

width: 100%;

height: auto;

}

/* On mouse-over, add a deeper shadow */

.card:hover {

box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);

}

.card_excerpt {

// float: right; // no need

width: 50%;

}

.card_image {

width: 40%;

clear:both;

}

CARD TITLE

• Bullet 1
• Bullet 2
• Bullet 3
• Bullet 4
• Bullet 5
• Bullet 6
• Bullet 7

匿名用户

这可以很容易地用flexbox完成，而不需要修改HTML

null.card {

/* Add shadows to create the "card" effect */

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

transition: 0.3s;

padding: 20px;

width: 100%;

display: flex;

flex-wrap: wrap;

align-content: center;

}

/* On mouse-over, add a deeper shadow */

.card:hover {

box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);

}

.card>h3 {

flex: 1 0 100%;

}

.card_excerpt {

flex: 1 1 50%;

}

.card_image {

flex: 1 1 40%;

}

CARD TITLE

• Bullet 1
• Bullet 2
• Bullet 3
• Bullet 4
• Bullet 5
• Bullet 6
• Bullet 7