Question

我有一个元素列表，我试图每行显示两个。我尝试使用display：block让它们每行显示一行作为第一步，但它似乎不起作用。

我错过了什么？

＆＃13;

.legend { list-style: none; }
.legend li {float: left; margin-right: 1%; }
.legend span {display:block; float: left; width:10px; height:10px; margin: 1%; }
/* your colors */
.legend .available {background-color: #8bc34a; }
.legend .yourRequest {background-color: #ffee58; }
.legend .yourSession {background-color: #ef5350; }
.legend .unavailable {background-color: #bdbdbd; }

＆＃13;

<ul class="legend">
  <li><span class="available"></span> Available</li>
  <li><span class="yourRequest"></span> Your Request </li>
  <li><span class="yourSession"></span> Your Session </li>
  <li><span class="unavailable">       
  </span> Unavailable</li>
</ul>

＆＃13;

jsFiddle DEMO

Answer 1

你可以给他们50％的宽度（49％+ 1％的保证金）：

＆＃13;

.legend { list-style: none; }
.legend li {display:block; float: left; margin-right: 1%; width: 49%; }
.legend span {float: left; width:10px; height:10px; margin: 1%; }
/* your colors */
.legend .available { background-color: #8bc34a; }
.legend .yourRequest { background-color: #ffee58; }
.legend .yourSession { background-color: #ef5350; }
.legend .unavailable { background-color: #bdbdbd; }

＆＃13;

<ul class="legend">
  <li><span class="available"></span>Available</li>
  <li><span class="yourRequest"></span>Your Request (Click to see details)</li>
  <li><span class="yourSession"></span> Your Session (Click to see details)</li>
  <li><span class="unavailable"></span>Unavailable</li>
</ul>

＆＃13;

Answer 2

columns属性允许您自动将列表项自动划分为列。

＆＃13;

.legend {
  columns: 2;
}
.legend span {display:block; float: left; width:10px; height:10px; margin: 1%; }
/* your colors */
.legend .available {background-color: #8bc34a; }
.legend .yourRequest {background-color: #ffee58; }
.legend .yourSession {background-color: #ef5350; }
.legend .unavailable {background-color: #bdbdbd; }

＆＃13;

<ul class="legend">
  <li><span class="available"></span>Available</li>
  <li><span class="yourRequest"></span>Your Request (Click to see details)</li>
  <li><span class="yourSession"></span> Your Session (Click to see details)</li>
  <li><span class="unavailable">       
  </span>Unavailable</li>
</ul>

＆＃13;

当然，这将按顺序排列项目，然后向右排序：

1 4
2 5
3 6

而不是

1 2
3 4
5 6

Answer 3

编辑以下行

.legend li {float: left; margin-right: 1%; }

到这个

.legend li {float: left; clear: both; margin-right: 1%; }

这样它每行会显示一个块。

CSS每行两个ul> li元素

3 个答案: