Question

我正在尝试为我的网站设计一个页脚部分，而我遇到了跨浏览器兼容的解决方案。我需要一种方法来显示内嵌div，其中包含垂直列表。例如

Div 1     Div 2
.li one   .li one
.li two   .li two
          .li three

任何帮助将不胜感激！

Answer 1

这是一个使用浮点数和一个简单的clear:both;黑客的快速示例来保持div内部说你的页脚......

<强> CSS：

.foot-box {
  width: 200px;
  float: left;
  margin-right: 10px;
}

<强> HTML：

<div class="foot-box">
<ul>
 <li>element</li>
 <li>element</li>
 <li>element</li>
</ul>
</div>
<div class="foot-box">
<ul>
 <li>element</li>
 <li>element</li>
 <li>element</li>
</ul>
</div>
<div class="foot-box">
<ul>
 <li>element</li>
 <li>element</li>
 <li>element</li>
</ul>
</div>
<div style="clear:both;"></div>

http://jsfiddle.net/YASU5/

Answer 2

使用一点@Jakub答案，你可以做到这一点，而不需要浮动。

CSS：

.foot-box {
  width: 200px;
  display:inline-block;
  margin-right: 10px;
  vertical-align:top;
}

HTML

<div class="foot-box">
<ul>
 <li>element</li>
 <li>element</li>
 <li>element</li>
</ul>
</div>
<div class="foot-box">
<ul>
 <li>element</li>
 <li>element</li>
 <li>element</li>
</ul>
</div>
<div class="foot-box">
<ul>
 <li>element</li>
 <li>element</li>
 <li>element</li>
 <li>element</li>
</ul>
</div>

它将允许列表具有不同数量的项目。

http://jsfiddle.net/XHtnU/

带有垂直列表的内联div

2 个答案: