如何將元素水平放置在div內

Question

我有一個div，我希望div內的元素水平放置。

這裏是我的小代碼

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

我有我的DIV這兩個要素，我想將它們放置在一個行，但我得到一個標籤，然後下一行中我得到的文本框，任何想法如何在一條線上。

DISPLY：直列工作..但

不是這個可能..？

  <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

定義浮動或顯示：內嵌塊它。這樣寫：

label,input{display:inline-block} 

Answer 2

使用float:left和float:right財產。

演示這裏http://jsfiddle.net/suw8R/4/

Answer 3

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

Answer 4

如果您需要的元素在一排，那麼你就需要強制父不換行，使用CSS white-space屬性：

parentElementSelector { 
    white-space: nowrap; 
} 

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

如果您僅使用display屬性，則元素在它們的父容器中到達行的末尾時將進行換行，而nowrap強制行繼續。您也可能希望根據您的設計/要求爲父元素指定overflow行爲（hidden，overflow-x等等）。