如何水平对齐文本框

Question

我想将两个文本框及其显示名称并排排成一行 我正在使用dl，dt和dd。我在水平对齐它们时遇到了问题。可以在任何身体上建议我对这个对齐有所了解 谢谢！

Answer 1

如果不知道您的具体情况，我会设置

float:left;

到dd和dt。

http://jsfiddle.net/WFzfR/

编辑：在你的小提琴中，只需擦除清楚：左;来自.tm dt

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

Answer 2

如果您要在一行上对齐两个文本框。下面是关于jsfiddle的演示。我可以从你的问题中找出这个问题

Link to Jsfiddle

Answer 3

删除.tm dt上的'clear：left'，它们将在同一行

像这样： http://jsfiddle.net/kude9/1/

Answer 4

display:inline通常是我的第一次尝试。如果这种方式不起作用或不是理想的解决方案，我通常会像Alvaro所说的那样使用float:left。

Answer 5

您不需要在 .tm dt，dd 类中定义 float：left ，因为您已经定义了 display：inline < / strong>我希望您熟悉阻止＆amp;内联元素所以内联元素将以水平形式出现，并将自动设置为一行......

<强> 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/