Question

我有这个HTML代码

<div style="display:inline" >
    <div>
        <label>NOM:</label>
    </div>
    <div>
        <label>Ben felten</label>
    </div>
</div>

我得到了这个结果：

im1

我需要更改我的代码才能获得如下结果：

im2

我需要在同一行显示两个标签，每个div（每个label的父级）宽度为网页宽度的50％。

我怎样才能改变我的snipet来做到这一点？

由于

Answer 1

您需要显示内联而不仅仅是父div。

div{
  display:inline;
}

label{
  display:inline;
}

http://jsfiddle.net/SVH5C/

Answer 2

在主div中添加一个类：

<div class="main">
    <div >
        <label>NOM:</label>
    </div>
    <div>
        <label>Ben felten</label>
    </div>
</div>

并在你的CSS中：

.main div{width: 50%; float: left;}

或者，如果divs内的那些仅仅是标签，则不需要它们存在，您可以直接设置标签样式，例如：

<div class="main">
    <label>NOM:</label>
    <label>Ben felten</label>
</div>

CSS：

.main label{display: block; width: 50%; float: left;}

Answer 3

尝试这样的事情：

<div style="display:inline" >
    <div style="float: left; width: 50%;">
        <label>NOM:</label>
    </div>
    <div style="float: left; width: 50%;">
        <label>Ben felten</label>
    </div>
</div>

Answer 4

HTML：

<div>
    <div class="label-container">
        <label>NOM:</label>
    </div>
    <div class="label-container">
        <label  >Ben felten</label>
    </div>
    <div class="labels-end"/>
</div>

CSS：

div.labels-end{
    clear: both;
}
div.label-container{
    float: left;
    width: 50%;
}

小提琴http://jsfiddle.net/RsK5N/3/

Div＆＃34;标签 - 结束＆＃34;如果标签遍布整个宽度，则不是强制性的如果没有额外的clear: both样式div浏览器，则会尝试将后一内容放在与标签相同的行中。所以它没有这个div，但只，因为没有更多宽度可用。

Answer 5

您还可以按如下方式使用内联块和表格单元格。

使用内联块

<div class="ex1">
    <label>NOM:</label><label>Ben felten</label>
</div>


div.ex1 {
    border: 1px dashed gray;
    width: auto; /* will take the width of parent (page) container */
}
div.ex1 label {
    display: inline-block;
    width: 50%;
    background-color: beige;
    overflow: auto;
    vertical-align: top;
}

使用CSS table-cells

<div class="ex2">
    <label>NOM:</label><label>Ben felten</label>
</div>

div.ex2 {
    border: 1px dashed gray;
    width: 100%; /* will take the width of parent (page) container */
    display: table;
}
div.ex2 label {
    display: table-cell;
    width: 50%;
    background-color: beige;
}

如果使用内联块，则需要注意两个label元素之间的任何空白区域，因为任何空格都会增加行的宽度，并导致第二个label换行到第二行。使用vertical-align: top删除由于内联格式化而出现的标签下方的额外空白区域。

表格单元格不会出现额外的空格问题。在表格div上使用width: 100%使其填满父容器的宽度（auto给出一个缩小到适合的宽度）。

请参阅演示：http://jsfiddle.net/audetwebdesign/Nb24q/

评论：除非您出于其他原因需要，否则您无需将label元素包装在div中。

在同一行显示标签

5 个答案: