2

我想将两个文本框与其显示名称对齐，并排在一行中我正在使用 dl、dt 和 dd。我在水平对齐它们时遇到了问题。任何人都可以建议我对这种对齐方式有一些想法吗？谢谢！

4

5 回答 5

0

删除 .tm dt 上的“clear:left”，它们将位于同一行

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

于 2012-06-22T09:13:29.360 回答
0

您不需要在 .tm dt, dd 类中定义float : left因为您已经定义了display:inline我希望您可能熟悉块和内联元素，因此内联元素将以水平形式出现并自动设置在一排...

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/

于 2012-06-22T09:34:27.997 回答
0

在不知道您的确切情况的情况下，我会设置

float:left;

到 dd 和 dt。

http://jsfiddle.net/WFzfR/

编辑：在你的小提琴中，只需擦除 clear: left; 从 .tm dt

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

于 2012-06-22T09:07:38.600 回答
0

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

于 2012-06-22T09:20:44.103 回答
0

如果您正在寻找在一行上对齐两个文本框。下面是关于 jsfiddle 的演示。我只能从你的问题中看出这一点

链接到 Jsfiddle

于 2012-06-22T09:12:05.827 回答