Question

我试图摆脱每个li项目之后的额外空间，以使块与其内容大小相同。我试图将它们显示为内联，但这会删除子弹。

HTML

<div>
<ul>
    <li>banana</li>
    <li>orange</li>
    <li>cherry</li>
</ul>

CSS

div {
    width: 40%;
    min-height: 50%;
    border:1px solid black;
}
li {
    border:1px solid black;
}

Answer 1

正如我在评论中提到的那样，你必须像这样ul display: inline-block;：

ul{
    display: inline-block;
}

fiddle

Answer 2

尝试此代码DEMO

div{
    width: 40%;
    min-height: 50%;
    border:1px solid black;
}
ul {
    margin:0;
    padding:0;
}
li{
     border:1px solid black;
    list-style:inside;


}

Answer 3

<强> CSS

ul{
           display: inline-block;
    }

内联阻止

基本上，它是一种使元素内联的方法，但保留了它们的块功能，例如设置宽度和高度，顶部和底部边距以及填充等。

More Info Regarding Inline-block

Updated Fiddle

制作一定宽度的列表项

3 个答案: