Question

我有一个div，我希望div中的元素水平放置。

这是我的小代码

<div>
    <g:Label>Legal Name </g:Label>
    <g:TextBox> </g:TextBox>
</div>

我在div中有这两个元素，我想将它们放在一行中，但是我得到一个标签然后在下一行我得到文本框，任何想法如何在一行中创建两个。

显示：内联工作..但

这不可能......？

            <div className="test">

    <g:Label>Legal Name </g:Label>
    <g:TextBox ui:field="txtLegalName"></g:TextBox>

    </div>

的CSS：

   .test{
display:inline-block;

}

我实际上想要减少我的代码，不想把这种风格放到Div的每个小部件上，因为这个div中会有很多元素

谢谢

Answer 1

定义 float 或 display：inline-block 。写得像这样：

label,input{display:inline-block}

Answer 2

使用float:left和float:right属性。

在这里演示http://jsfiddle.net/suw8R/4/

Answer 3

如果您要求元素在一行中，那么您需要使用CSS white-space属性强制父级不包装行：

parentElementSelector {
    white-space: nowrap;
}

parentElementSelector childElements {
    display: inline;
    /* or:
    display: inline-block;
    */
}

如果仅使用display属性，元素将在其父容器中到达行尾时换行，而nowrap强制该行继续。您可能还希望根据您的设计/要求为父元素overflow，hidden等指定overflow-x行为。

Answer 4

<g:HorizontalPanel>
    <g:Label>Legal Name </g:Label>
    <g:TextBox> </g:TextBox>
</g:HorizontalPanel>

如何在div中水平放置元素

4 个答案: