Question

我的代码是：

<label>Something:</label> <span>Some Value</span>
<br/>

<label>Something:</label> <span>Some Value</span>
<br/>

<label>有固定的宽度。

输出：

Something:  Some Value
Something:  Some Value

但是，如果某些值很长，则包装不正确

Something:  Some Value
Something:  Some Value Some
Value Some

有没有一个很好的解决方案，所以它按照你的预期排队？我正在制作一个相当大的数据表，并且无法预测哪些值会提前跨越多行。

Answer 1

如果您可以修复两个元素的宽度，则应用display:block和float:left。这将创建一个类似外观的列，并使跨度在列中包装。

<强> CSS ：

   label, span{
        float: left;
        width: 150px; /* Adjust widths to fit your needs */
    }

   br{ clear: both;}

<强> HTML

<label>Something:</label> <span>Some Value</span>
<br/>

<label>Something:</label> <span>Some Value that is alot longer and wraps</span>

JS小提琴： http://jsfiddle.net/gvPdQ/

Answer 2

如果允许您调整标记我有以下解决方案。要求标签是固定宽度;跨度填补剩余空间。

HTML

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

CSS

.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 */
}

Demo here

Answer 3

如果要制作“大型数据表”，请使用table元素，例如

<table>
<tr><th>Something <td>Some value
<tr><th>Something <td>Some value
...
</table>

您仍然可以在Something上设置固定宽度，但不需要。

将label元素用于标记可标记元素（通常是控件，即表单字段）以外的任何其他内容是不正确的。

当<span>有时会进行多行时，如何将<label>与<span>对齐？</span> </span> </label>

3 个答案:

HTML

CSS