Question

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

HTML的片段：

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

Answer 1

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

Answer 2

我刚把它添加到你的css中：

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

不幸的是，我不知道现在对inline-block的支持程度如何。

Answer 3

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

Answer 4

这个怎么样：

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

Answer 5

是的，使用display:block除非您尝试为每个人指定宽度，否则不可能让他们坐在彼此旁边但如果是这种情况，只需使用display:inline

Answer 6

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

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

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

Answer 7

使用inline或inline-block只会带来麻烦。使用浮点数是一个更好的主意，正如@Dmitry Z所建议的那样（但没有边缘黑客，这是不必要的）。

Answer 8

一个简单的浮点数：左边可以工作（对宽度进行微调）

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

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

如何将<li>与块元素放在一起？</li>

8 个答案: