如何使用块元素将放在一起？

I have a mockup layout for something here. Essentially there are sections, columns and fields, which are all written as a combination of <ul> and <li> elements. This is done specifically for later parsing.

我在这里有一个模型布局。基本上有部分,列和字段,它们都是作为

元素的组合编写的。这是专门为以后的解析而完成的。

A snippet of the HTML:

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>

If you go to the linked content you'll note that those columns sit vertically. I want the columns to sit beside each other, but I am not sure how to go about it.

如果您转到链接的内容,您会注意到这些列是垂直的。我希望列彼此相邻,但我不知道如何去做。

It would be preferable if the HTML didn't change, just the CSS.

如果HTML没有改变,那就更好了,只有CSS。

8 个解决方案

#1

I just added this to your css:

我刚把它添加到你的CSS中:

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

Unfortunately, I don't know how well supported inline-block is nowadays.

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

#2

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

#3

In your <UL> tag use the css attribute "list-style:none;" and in the <li> tag use the css attribute "display:inline;" you'll have to play around with the padding and margin to make it look good, but those two attributes will get you on your way. For a better example see my Non-Profit website: Technically Learning

在

标签中使用css属性“display:inline;”你必须使用填充和边距来使它看起来很好,但这两个属性将让你在路上。有关更好的示例,请参阅我的非营利性网站:技术学习

#4

How about this:

这个怎么样:

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

#5

yeah using display:block it would be impossible to make them sit beside each other unless if you'd try to specify a width for each of them but if that's the case just use display:inline

是的使用display:block它们是不可能让它们彼此相邻,除非你试图为每个它们指定一个宽度但是如果是这种情况只需使用display:inline

#6

Just an alternative to using inline elements since IE has had a history of padding problems with inline:

只是使用内联元素的替代方法,因为IE有内联填充问题的历史:

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

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

#7

Using inline or inline-block is going to be nothing but trouble. It's a much better idea to use floats as @Dmitry Z has suggested (but without the margin hack, which isn't necessary).

使用内联或内联块将只是麻烦。使用浮点数是一个更好的主意,正如@Dmitry Z所建议的那样(但没有边缘黑客,这是没有必要的)。

#8

A simple float: left will work (with a minor adjustment for the width)

一个简单的浮动:左边可以工作(对宽度进行微调)

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

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

#1