<label><span>當<span>有時會進行多</span>行時，</span></label>如何將a <label>與a</label>對齊<label><span><span>？</span></span></label>

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

在這里演示

Answer 3

如果要制作“大型數據表”，請使用table元素，例如

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

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

將label元素用於標記可標記元素（通常是控件，即表單字段）以外的任何其他內容是不正確的。