换行一个内联列表答案

【问题标题】：Break line an inline list换行一个内联列表
【发布时间】：2015-02-20 11:28:27
【问题描述】：

我有一个内联列表，我需要将列表分成两行...

<ul>
    <li><h1><a href="#">One</a></h1></li>
    <li><h1><a href="#">Two</a></h1></li>
    <li><h1><a href="#">Three</a></h1></li>
    <li><h1><a href="#">Four</a></h1></li>
    <li><h1><a href="#">Five</a></h1></li>
    <li><h1><a href="#">Six</a></h1></li>
    <li><h1><a href="#">Seven</a></h1></li>
</ul>

想要的结果：

一二三四五六七

【问题讨论】：

标签： html css

【解决方案1】：

float 和 clear 呢？

ul {overflow: hidden;}
li {float: left;}
li:nth-child(4) {clear: left;}

http://jsfiddle.net/hfc0u7e8/

或者，如果您不想浮动项目并使用如您所写的display: inline，您可以将此代码与:before 一起使用：

ul {overflow: hidden;}
li, h1 {display: inline;}
li:nth-child(4):before {display: block; content: '';}

http://jsfiddle.net/hfc0u7e8/1/

【讨论】：

【解决方案2】：

您可以通过使用 css 来实现这一点，这里我已经将带有夹板的 div 添加到 html 以使子级包含在 ul 中。

ul li{list-style:none; float:left;}
ul li:nth-child(5){clear:both;}
ul li h1 a{text-decoration:none;}

<ul>
    <li><h1><a href="#">One</a></h1></li>
    <li><h1><a href="#">Two</a></h1></li>
    <li><h1><a href="#">Three</a></h1></li>
    <li><h1><a href="#">Four</a></h1></li>
    <li><h1><a href="#">Five</a></h1></li>
    <li><h1><a href="#">Six</a></h1></li>
    <li><h1><a href="#">Seven</a></h1></li>
    <div style="clear:both;">
</ul>

【讨论】：

【解决方案3】：

显然不希望拆分列表，因此对于响应式列表，只需在地段周围添加一个 div 并为其设置合适的宽度：

html:

<div>
  <ul>
    <li><h1><a href="#">One</a></h1></li>
    <li><h1><a href="#">Two</a></h1></li>
    <li><h1><a href="#">Three</a></h1></li>
    <li><h1><a href="#">Four</a></h1></li>
    <li><h1><a href="#">Five</a></h1></li>
    <li><h1><a href="#">Six</a></h1></li>
    <li><h1><a href="#">Seven</a></h1></li>
  </ul>
</div>

CSS：

ul {list-style:none;}
li {display:inline-block;}
div {float:left; width:60%;}

Fiddle here

【讨论】：

完全无能的方式恕我直言
@SHAMAN 两行css，html中没有样式。哪方面效率低下？
@MarkHamill：例如呢？响应式设计，什么时候需要连续显示两个项目？你的代码是不可能的。设计的事情应该在 CSS 中完成，而不是把一个 UL 分成两个，而我只需要一个列表。
@panther OP 只询问如何将列表分成两行，而不是如何使列表响应宽度。可以通过将列表放入具有合适宽度的div来制作响应宽度：fiddle
@MarkHamill：这只是一个例子。没有理由将一个 UL 分成两个 UL。这是 css 的任务，而不是 html