带框的无序列表

我有一个无序的列表，其中的列表项是水平显示的。每个列表项目应包含一些文本和图像。当我向他们添加内容时，列表项不再对齐。带框的无序列表

ul { 
 
    list-style-type: none; 
 
    width: 500px; 
 
    height: 500px; 
 
    border: 1px solid black; 
 
} 
 
li { 
 
    border: 1px solid blue; 
 
    display: inline-block; 
 
    height: 100px; 
 
    width: 100px; 
 
}

<ul> 
 
    <li>222</li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>

Jsbin：https://jsbin.com/fobopayaco/edit?html,css,output

有SOM CSS我可以添加到解决这一问题？或者我应该改变我的标记？

来源

2016-06-10 Per

您可以只设置vertical-align到top例如

ul { 
 
    list-style-type: none; 
 
    width: 500px; 
 
    height: 500px; 
 
    border: 1px solid black; 
 
} 
 
li { 
 
    border: 1px solid blue; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    height: 100px; 
 
    width: 100px; 
 
}

<ul> 
 
    <li>222</li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>

来源

2016-06-10 13:01:49

名单只是不喜欢空白的项目。如果因为某种原因需要某个项目为空，请使用<li> </li>，否则一旦将所有内容添加到所有项目，normalcy将返回。

来源

2016-06-10 13:03:19 SunKnight0

通过添加文本，您会看到默认的vertical-align属性的效果：您的列表项正在与基线对齐。

如果你希望它们都在同一地点进行排列，指定vertical-align属性为所有这些：

li{ 
    border:1px solid blue; 
    display:inline-block; 
    height:100px; 
    vertical-align: top; 
    width:100px; 
}

来源

2016-06-10 13:03:54 ajm

李尝试float:left，而不是display:inline-block

来源

2016-06-10 13:03:58 pix1289

或者您可以使用float来left每一个<li>

ul { 
 
    list-style-type: none; 
 
    width: 500px; 
 
    height: 500px; 
 
    border: 1px solid black; 
 
} 
 
li { 
 
    border: 1px solid blue; 
 
    display: inline-block; 
 
    height: 100px; 
 
    width: 100px; 
 
    float: left; 
 
}

<ul> 
 
    <li>222</li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>

来源

2016-06-10 13:04:16 pes502

您可以添加浮动：左或显示：内联在你的CSS

li{ 
     border:1px solid blue; 
     display:inline-block; 
     height:100px; 
     width:100px; 
    display:inline; 
    }

这里正在拨弄

https://jsfiddle.net/5dh2ak3a/

来源

2016-06-10 13:13:32

带框的无序列表

回答

相关问题