Question

我有一个包含长项目的水平列表。如果一个列表项非常长或者所有列表项都非常短，则列表包装正常。

但是，如果两个列表项都很长，则它们不会在可用空间中分割。此图像显示了问题：

enter image description here

这是我正在使用的标记：

<html>
<style>
    ul {text-align:left; width:400px}
    li {float:left; padding-left:20px; list-style-type:none; display:inline; white-space:normal;}
    li a {display:inline; white-space:normal;}
</style>
<body>
<ul>
    <li><a href="#">>alf; fa sadlf;</a>  </li>
    <li><a href="#">>a sdf; fa sd; asd;lfgj </a></li>
    <li><a href="#">>a sdfasdgsadlf; asd;lfgj asdgsadlf sd; asd;lfgj</a> </li>
    <li><a href="#">>a sdg gj asdgsadlf; afg adfg asd;lkfalfgj</a></li>
</ul>
</body>
</html>

Answer 1

你可以通过删除一些代码来做到这一点。如果我理解正确，您只需要以下内容：

 ul { width:400px; }
 li {
    list-style-type:none; 
    display:inline;
    padding-left:20px
 }

以下是一个示例：http://jsfiddle.net/M9zqE/

Answer 2

它是通过不浮动项目来修复的（因此不会从流程中删除它们）

请参阅http://jsfiddle.net/pRCFR/

使用CSS将每个项目包装在水平列表中

2 个答案: