我想知道是否有办法使无序列表项中的文本以“列”的形式出现在标准圆点列表项图标的旁边? 我拍了一对截图:
这是使用带有某些列表项(li)内文本的标准无序列表时的外观:
这是我想要的外观:
这是否可能不使用任何图像/ div hack呢?;-) 我已经搜索过了,看看是否有任何标准CSS设置,但似乎没有找到任何内容。
非常感谢!
一切顺利,
Bo
我想知道是否有办法使无序列表项中的文本以“列”的形式出现在标准圆点列表项图标的旁边? 我拍了一对截图:
这是使用带有某些列表项(li)内文本的标准无序列表时的外观:
这是我想要的外观:
这是否可能不使用任何图像/ div hack呢?;-) 我已经搜索过了,看看是否有任何标准CSS设置,但似乎没有找到任何内容。
非常感谢!
一切顺利,
Bo
list-style-position
是您要查找的属性。它在所有浏览器中都有效。(有关更多详细信息,请参见MDN)
ul {
list-style-position: outside;
/* You may want to add an additional padding-left: */
padding-left: 1.5em;
}
但实际上,在外面,outside
是默认值。你可能在其他地方覆盖了它。
<ul>
<li>Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
CSS
ul{
margin:0;
padding:0 20px;
}
ul li {
padding:0;
width:150px;
background:red;
margin:10px 0;
}
我认为将列表项向左浮动是使它们呈列显示的最佳解决方案。
下面的CSS代码可能会对你有所帮助:
<style type="text/css">
ul > li {
margin: 0 10px;
width: 150px;
float: left;
}
</style>
只需在 <ul> 标签下使用开放(<li>)和关闭(</li>)标签包围文本即可。
例如:
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li>
<li>This is list item - 2</li>
<li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</li>
<li>This is list item - 4</li>
</ul>
输出将是,
添加这个
ul {
display:inline-block;
}