使用HTML/CSS将可变大小的数据/文本列表与相应的标签/文本对齐
使用HTML/CSS将可变大小的数据/文本列表与相应的标签/文本对齐
提问于 2013-02-26 23:48:34
使用CSS将可变大小的数据与相应的标签(常规标签，而不是表单标签)对齐的最佳方式是什么，以便实现如下所示：
Name: James Bob
Description: Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore...
ID: 007一份清单？嵌套的div？这对于表来说是小菜一碟，但是除了表格数据之外，表总是不受欢迎的。我尝试过使用浮动div，但是在中间连接它们是一场噩梦，特别是当标签或数据的长度发生变化时。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-02-27 00:05:01
像这样的布局怎么样
HTML
<div class="l">Name:</div>
<div class="r">James Bob</div>
<div class="l">Description:</div>
<div class="r">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore...</div>
<div class="l">ID:</div>
<div class="r">007<div>CSS
.l {
clear:left;
float:left;
width:100px;
text-align:right;
padding-right:10px;
}
.r {
overflow:auto;
}Stack Overflow用户
发布于 2013-02-26 23:51:11
尝试将标注向左浮动，然后对标注使用width或min-width
<label>Blahblah : </label><input type="text" /><br />
<label>Blahblah : </label><input type="text" /><br />
<label>Blahblah : </label><input type="text" /><br />
label {
float: left;
width: 300px; /* You can change this accordingly */
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15093394
复制相关文章
相似问题
腾讯云开发者
