帶下劃線的字段集圖例

我正在使用一個小接口，並且目前在一個帶有圖例的字段集中有一組簡單的單選按鈕。目前，它看起來像這樣：帶下劃線的字段集圖例

但我想要得到的傳說和按鍵之間的邊界，就像這樣：

的代碼如下：

<fieldset> 
    <legend>Size:</legend> 
    <label> 
    <input type="radio" name="size" value="small" checked="checked" /> Small 
    </label> 
    <label> 
    <input type="radio" name="size" value="medium" /> Medium 
    </label> 
    <label> 
    <input type="radio" name="size" value="big" /> Big 
    </label> 
</fieldset>

任何意見將不勝感激！

來源

2016-01-28 Joe Balin

你試過'字段集{ \t邊界：無; \t border-top：1px solid; \t }'？ –

是的，我已經嘗試過 - 它所做的就是在第一張圖片中留下邊框的頂端！ –

我能得到的最接近的是fieldset {border = 0; border = none; \t } 傳說{ \t border-bottom：2px solid; margin：inherit; }'這會使線條的長度等於圖例中文字的長度 –

試試這個：

fieldset { 
    border: none; 
} 
legend { 
    border-bottom: 1px solid black; 
    padding: 2px 0px; 
    width: 100%; 
}

Demo

來源

2016-01-28 04:01:31 Ferrrmolina

美麗！正是我在找什麼。謝謝！ –

帶下劃線的字段集圖例

回答

相關問題