Question

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

<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>

欲望结果：

一二三四＆lt; / BR＆GT; 五六七

Answer 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/

Answer 2

你可以通过使用css来实现这一点，在这里我已经添加了div和cleat两者到html以使孩子们包含在ul中。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 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

中断行内联列表

3 个答案: