我想将两个文本框与其显示名称对齐,并排在一行中我正在使用 dl、dt 和 dd。我在水平对齐它们时遇到了问题。任何人都可以建议我对这种对齐方式有一些想法吗?谢谢!
问问题
8645 次
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>
于 2012-06-22T09:34:27.997 回答
0
在不知道您的确切情况的情况下,我会设置
float:left;
到 dd 和 dt。
编辑:在你的小提琴中,只需擦除 clear: left; 从 .tm dt
于 2012-06-22T09:07:38.600 回答
0
display:inline
通常是我的第一次尝试。如果这不起作用或不是理想的解决方案,我经常float:left
像 Alvaro 所说的那样使用。
于 2012-06-22T09:20:44.103 回答
0
如果您正在寻找在一行上对齐两个文本框。下面是关于 jsfiddle 的演示。我只能从你的问题中看出这一点
于 2012-06-22T09:12:05.827 回答