如何使 <li> 与块元素并排放置？答案

【问题标题】：How do I make <li> with block elements sit beside each other?如何使 <li> 与块元素并排放置？
【发布时间】：2010-09-16 19:55:00
【问题描述】：

我有一个 here 的模型布局。本质上，有部分、列和字段，它们都写成<ul> 和<li> 元素的组合。这是专门为以后的解析而完成的。

HTML 的 sn-p：

<li class="layout"><span class="type">[Column] </span>
    <ul class="layout-children">
        <li class="field"><span class="type">[Text] </span>A field</li>
        <li class="field"><span class="type">[Text] </span>Another field</li>
        <li class="field"><span class="type">[Text] </span>Yet another field</li>
    </ul>
</li>
<li class="layout"><span class="type">[Column] </span>
    <ul class="layout-children">
        <li class="field"><span class="type">[Text] </span>More fields</li>
        <li class="field"><span class="type">[Text] </span>And one more field</li>
    </ul>
</li>

如果您访问linked content，您会注意到这些列是垂直放置的。我希望柱子并排放置，但我不知道该怎么做。

最好不要更改 HTML，只更改 CSS。

【问题讨论】：

标签： html css

【解决方案1】：

在您的<UL> 标签中使用css 属性“list-style:none;”并在 <li> 标签中使用 css 属性“display:inline;”您必须使用填充和边距才能使其看起来不错，但这两个属性将使您顺利上路。有关更好的示例，请参阅我的非营利网站：Technically Learning

【讨论】：

【解决方案2】：

这个怎么样：

.layout { float: left; width: 50%; margin: 0; border: 0; padding: 0; /* background: transparent */ }
* html .layout { display: inline } /* IE margin hack */
.field { clear: both }

【讨论】：

有一些方法可以在没有 hack 的情况下解决这个问题，所以我不建议这样做。

【解决方案3】：

是的，使用display:block 是不可能让它们并排放置，除非您尝试为它们中的每一个指定宽度但如果是这种情况，请使用display:inline

【讨论】：

【解决方案4】：

我刚刚将此添加到您的 css 中：

ul .section-children li.layout {
    display : inline-block;
}

不幸的是，我不知道现在对 inline-block 的支持有多好。

【讨论】：

inline-block 绝对是要走的路，如果它适用于您的目标系统。
inline-block 肯定被 IE 6 和 7... 支持在内联元素上。
然而，Firefox

【解决方案5】：

display: -moz-inline-box;
display: inline-block;
*display: inline;
*zoom: 1;

【讨论】：

@CharlesPrakashDasari，旧版本的 IE（6 和 7）不支持默认为 block 的元素上的 inline-block。但是inline 加上IE 专有的hasLayout 状态与inline-block 相同。 * 前缀针对这些旧 IE 版本中的 CSS 解析错误，隔离了这些样式。 zoom: 1 触发 hasLayout 没有任何副作用。

【解决方案6】：

只是使用内联元素的一种替代方法，因为 IE 有内联填充问题的历史：

.layout-children:after
{
  content: "";
  display: block;
  height: 0px;
  clear: both;
}

.layout-children .field
{
  float: left;
}

【讨论】：

IE 也有 :after 伪元素问题的历史。

【解决方案7】：

使用inline 或inline-block 只会带来麻烦。正如@Dmitry Z 所建议的那样使用浮动是一个更好的主意（但没有margin hack，这不是必需的）。

【讨论】：

【解决方案8】：

一个简单的 float: left 就可以了（稍微调整一下宽度）

li {
    margin: .5em 1em;
    padding: .1em;

    font-family: sans-serif;
    list-style-type: none;
    border: 1px #666 solid;
    float: left;
}
#layout-section {
    width: 85%;
}

【讨论】：