如何水平排列文本框

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/