如何水平排列文本框

Question

我想將兩個文本框與它們的顯示名稱並排排列在一行中 我正在使用dl，dt和dd.I在水平排列時遇到問題。關於這種對齊的一些想法 謝謝！

Answer 1

不知道您的具體情況，我會成立

float:left; 

到DD和DT。

http://jsfiddle.net/WFzfR/

編輯：在您的小提琴，只是抹去明確：左;從.tm DT

http://jsfiddle.net/3hqws/2/

Answer 2

如果您正在尋找在一行alligning兩個文本框。下面是jsfiddle的演示。我可以做出來只有這從你的問題

Link to Jsfiddle

Answer 3

刪除：上.tm「清除左」 DT，他們會在同一行

像這樣： http://jsfiddle.net/kude9/1/

Answer 4

display:inline通常是我的第一次嘗試。如果這種方式不起作用或者不是理想的解決方案，我就像Alvaro說的那樣經常使用float:left。

Answer 5

你不需要定義浮動：左到您的.tm DT，DD類，因爲您已經定義了顯示：內聯我希望你可能熟悉塊&內聯元素所以內聯元素會在水平方向和形式將在單行自動設置...

CSS

.tm dt, dd 
     { 
      color:Black; 
      margin: 0; 
      padding: 0; 
      height: 30px; 
      line-height: 30px; 
      display:inline; 
      border:1px solid red;    
     } 
     .tm dt 
     { 
      padding: 0 5px 0 15px; 
      text-align: right; 
      opacity: 0.6; 
      width: 100px;  
     } 

HTML

<div class="tm"> 
    </dl>    
    <dt>Course </dt>    
    <dd>hello</dd> 


<dt> Spl</dt>     
    <dd>hello</dd></dl></div> 

看到演示： - http://jsfiddle.net/kude9/3/