具有任意水平尺寸的等寬表格標籤

我有一個水平的label: <input>樣式表格。標籤需要具有相同的寬度，但是是動態的 - 基於表單中最長的標籤。通常情況下，我會用一系列display: table/row/cell元素來解決這個問題，但是我們還需要一個將這些行分開的水平規則。具有任意水平尺寸的等寬表格標籤

display: table與其中的非行/單元格元素不能很好地發揮作用。

核心形式結構：

<form> 
    <div class="group"> 
     <span>test</span> 
     <div class="field"> 
     <input type="text"> 
     </div> 
    </div> 
    <hr> 
    <div class="group"> 
     <span>test long</span> 
     <div class="field"> 
     <input type="text"> 
     </div> 
    </div> 
    <div class="group"> 
     <span>test</span> 
     <div class="field"> 
     <input type="text"> 
     </div> 
    </div> 
    </form>

的CSS：

* { box-sizing: border-box; } 
html, body { width: 100%; } 

form { 
    display: table; 
    border-collapse: collapse; 
    border-spacing: 0; 
    width: 100%; 
    border: 1px solid red; 
} 

.group { 
    display: table-row; 
} 

span { 
    display: table-cell; 
    background: #ddd; 
    padding: 0 10px 0 0; 
    white-space: nowrap; 
    width: 1px; 
} 

input, hr { 
    width: 100%; 
}

標籤寬度工作，我所期待的，但該hr不能填補100％的寬度。我可以通過將其設置爲position: absolute來獲得正確的寬度，但是隨後我失去了行之間的間距。我可以使它成爲display: table-row，但不再控制間距。

JSBin

來源

2016-02-08 helion3

爲什麼不使用'border-bottom'而不是'hr'？ –

因爲這不允許我們對分隔符之前/之後的空格進行任何控制，這是必不可少的，而且我們的應用程序已經在類似的粘性情況下使用hrs。我看到的唯一選擇是在分隔符之前的元素*上使用新的類，並使用相鄰的同級分隔符來控制以下元素的填充頂部。使醜陋的設置變得更加難看，但可能是唯一的方法。 – helion3

這是一個有趣的一個。

我不知道你對設計有多嚴格，但這裏是一個好的解決方案。

hr{ 
    display:table-cell; 
    padding:10px 0; 
    border:none; 
    box-sizing:content-box; 
    background:black; 
    height:1px; 
    background-clip:content-box; 
}

在hr使用table-cell您可以將其擴展到全寬，與上padding的小動作和background-clip你可以有一個簡單的水平線。如果您想進一步添加圖像，可以添加圖像作爲背景，並使用repeat-x將其全幅展開。

來源

2016-02-11 18:07:54 xpy

具有任意水平尺寸的等寬表格標籤

回答

相關問題