[英]How do I align a <label> with a <span> when the <span> sometimes goes onto multiple lines?
My code is: 我的代码是:
<label>Something:</label> <span>Some Value</span>
<br/>
<label>Something:</label> <span>Some Value</span>
<br/>
The <label>
has a fixed width. <label>
具有固定宽度。
Output: 输出:
Something: Some Value
Something: Some Value
However if Some Value is quite long it wraps incorrectly 但是,如果某些值很长,则包装不正确
Something: Some Value
Something: Some Value Some
Value Some
Is there a nice solution to this so it lines up as you'd expect? 有没有一个很好的解决方案,所以它按照你的预期排队? I'm making rather a large table of data and it's not possible to predict which values will span multiple lines in advance.
我正在制作一个相当大的数据表,并且无法预测哪些值会提前跨越多行。
If you can fix the width of both elements apply display:block
and float:left
. 如果你可以修复两个元素的宽度,则应用
display:block
和float:left
。 This will create a column like appearance and cause the span to wrap within the column. 这将创建一个类似于外观的列,并使跨度包含在列中。
CSS : CSS :
label, span{
float: left;
width: 150px; /* Adjust widths to fit your needs */
}
br{ clear: both;}
HTML HTML
<label>Something:</label> <span>Some Value</span>
<br/>
<label>Something:</label> <span>Some Value that is alot longer and wraps</span>
JS Fiddle: http://jsfiddle.net/gvPdQ/ JS小提琴: http : //jsfiddle.net/gvPdQ/
If you are allowed to tweak you markup I have the following solution. 如果您被允许调整标记我有以下解决方案。 Requires that labels are fixed width;
要求标签是固定宽度; the spans fill remaining space.
跨度填补剩余空间。
<div class="row">
<label>Something:</label> <span>Some Value</span>
</div>
<div class="row">
<label>Something:</label> <span>Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value</span>
</div>
.row {
overflow: hidden;
}
.row label {
display: block;
float: left;
width: 200px;
}
.row span {
display: block;
margin-left: 210px; /* equal to label width plus some gap */
}
If you are making “a large table of data”, use a table
element, eg 如果要制作“大型数据表”,请使用
table
元素,例如
<table>
<tr><th>Something <td>Some value
<tr><th>Something <td>Some value
...
</table>
You can still set a fixed width on Something, but you need not. 您仍然可以在Something上设置固定宽度,但您不需要。
It is incorrect to use the label
element for anything else than labelling a labellable element (normally, a control, ie form field). 将
label
元素用于标记可标记元素(通常是控件,即表单字段)以外的任何其他内容是不正确的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.