將圖標添加到收音機輸入結尾

我正在嘗試使用無線電輸入創建類似的UI，如下所示。大多數UI很容易重新創建，唯一的例外是將箭頭（圖標？）添加到標籤div的末尾。我試圖分開一個箭頭，並使用邊距將其強制到中心位置，但這顯然不是一個很好的解決方案。在標籤末尾添加箭頭的最佳方式是什麼？將圖標添加到收音機輸入結尾

下面是當前的代碼

<div id='results'> 
<form> 
    <input type="radio" name="result" value="1" id='opt-1' checked> 
    <label for="opt-1"><h3>Option 1</h3> 
    <p>Short Description of Option 1</p></label><br> 
    <input type="radio" name="result" value="2" id='opt-2' checked> 
    <label for="opt-2"><h3>Option 2</h3> 
    <p>Short Description of Option 2</p></label><br> 
    <input type="radio" name="result" value="3" id='opt-3' checked> 
    <label for="opt-3"><h3>Option 3</h3> 
    <p>Short Description of Option 3</p></label><br> 
</form> 
</div>

JSFiddle

編輯：

我知道的jsfiddle不能正確應用背景。該代碼在生產上運行良好。

來源

2017-08-02 LearnWorkLearn

加入你的CSS還，你已經嘗試 –

_「什麼是在標籤的末尾添加箭頭的最佳方式是什麼？」 _ - 絕對定位僞元素。（如果需要防止文本與文本重疊，則可以在右側添加填充，如果需要，將會打開第二行......如果這種情況甚至會在導航時發生）。 – CBroe

幾個問題：小提琴看起來不像目標。您是否計劃更新它，直到它開始模仿它？而且，如果您提供的是一次只能選擇一個的選項列表，那麼您爲什麼一直困擾箭頭呢？一個箭頭如何處理這種佈局？ – flyer

我創建類的包裝.LIST每個無線電項目綁定數據。

<div id='results'> 
    <form> 
    <div class="list"> 
    <span> 
     <input type="radio" name="result" value="1" id='opt-1' checked> 
    </span> 
    <span class="radio-content"> 
     <span> 
     <label class="mb-1" for="opt-1"><h3>Option 1</h3> 
     <p class="d-inline">Short Description of Option 1</p></label><br> 
     </span> 
    <span class="arrow"><</span> 
    </span> 
    </div> 
    <div class="list"> 
    <span> 
     <input type="radio" name="result" value="1" id='opt-1' checked> 
    </span> 
    <span class="radio-content"> 
     <span> 
     <label class="mb-1" for="opt-1"><h3>Option2</h3> 
     <p class="d-inline">Short Description of Option 2</p></label><br> 
     </span> 
    <span class="arrow"><</span> 
    </span> 
</div> 
</form> 
</div>

CSS代碼這裏

.list{ 
    display: flex; 
    align-items:center; 
} 

.mb-1{ 
    margin-bottom: 8px; 
} 

.radio-content{ 
    width:100%; 
    display:flex; 
    align-items:center; 
    justify-content: space-between; 
}

來源

2017-08-02 18:13:35

這是*完全*我在找什麼。感謝您的徹底迴應！ – LearnWorkLearn

總是歡迎:) J更改類名....我給一些愚蠢的類名:) –

而不是「<」您可以使用相應的圖標加上適當的間隔

label { 
 
    background-color: #16a085; 
 
    background: linear-gradient(to right, #16a085, #66a99c); 
 
    width: 80%; 
 
    padding-left: 15px; 
 
    padding-top: 10px; 
 
    margin-bottom: 3px; 
 
} 
 

 
form > label > h3 { 
 
    margin-bottom: 1px; 
 
} 
 

 
form > label > p { 
 
    margin-top: 1px; 
 
} 
 

 
form > label h3::after { 
 
    content: '\276E'; 
 
    position: absolute; 
 
    right: 0; 
 
    padding-right: 20px; 
 
} 
 

 
input[type=radio] { 
 
    display: none; 
 
}

<div id='results'> 
 
    <form> 
 
    <input type="radio" name="result" value="1" id='opt-1' checked> 
 
    <label for="opt-1"> 
 
     <h3>Option 1</h3> 
 
     <p>Short Description of Option 1</p> 
 
    </label><br> 
 
    <input type="radio" name="result" value="2" id='opt-2' checked> 
 
    <label for="opt-2"> 
 
     <h3>Option 2</h3> 
 
     <p>Short Description of Option 2</p> 
 
    </label><br> 
 
    <input type="radio" name="result" value="3" id='opt-3' checked> 
 
    <label for="opt-3"> 
 
     <h3>Option 3</h3> 
 
     <p>Short Description of Option 3</p> 
 
    </label><br> 
 
    </form> 
 
</div>

來源

2017-08-02 18:09:54

我更喜歡flexbox-is-awesome ;-)，因爲沒有廢話的HTML更加棒，而且由於這個箭頭似乎純粹是裝飾性的，所以它屬於CSS而不是作爲一個額外的元素HTML。除非有明確的要求能夠根據單選按鈕狀態更改標籤背景，否則我甚至會將輸入放入標籤內 - 避免保持id和for-attributes匹配的麻煩（for屬性可以是刪除而不是替換）和獨特的（想象在頁面上多次使用相同的組件）。 – CBroe

並且我們應該首先討論_valid_ HTML。 'h3'和'p'不能放在'label'中（不是你的錯誤，來自原始示例），因爲它允許[短語內容]（https://www.w3.org/TR/html5/ dom.html＃phrasing-content-1）只在裏面。所以我會用'strong'來選擇「標題」和一個額外的'span'作爲描述 - 只有當需要對描述進行額外的格式控制時才需要。 – CBroe

Yo @CBroe - 感謝您成爲那些超越狹隘答案但願意在整個項目中分享有用和廣泛知識的人才之一。這就是基於社區的知識共享工作。所有這些都非常有幫助！ – LearnWorkLearn

所以Flexbox的是真棒像這些佈局。它運行良好，並具有很好的瀏覽器支持（http://caniuse.com/#search=flexbox）。 IE有一些問題，但應該能夠解決。

ul { 
 
    list-style: none; 
 
    width: 400px; 
 
    border: 1px solid #ccc; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
ul li { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
    border-bottom: 1px solid #ccc; 
 
} 
 

 
ul li:last-child { 
 
    border-bottom: none; 
 
} 
 

 
.title { 
 
    flex-grow: 1; 
 
    padding-top: 4px; 
 
} 
 

 
.title h3 { 
 
    margin: 0; 
 
} 
 

 
.title p { 
 
    font-size: 9px; 
 
    color: #aaa; 
 
    margin: 1px 0 0 0; 
 
} 
 

 
.icon { 
 
    padding-left: 10px; 
 
    width: 40px; 
 
    line-height: 50px; 
 
    display: inline-block; 
 
} 
 

 
.toggle-switch { 
 
    line-height: 50px; 
 
    width: 50px; 
 
    display: inline-block; 
 
    text-align: center; 
 
}

<ul> 
 
    <li> 
 
    <span class="icon">*</span> 
 
    <div class="title"> 
 
     <h3>Stops</h3> 
 
     <p>Non stop, 1 stop, 2+ stops</p> 
 
    </div> 
 
    <span class="toggle-switch">^</span> 
 
    </li> 
 
    <li> 
 
    <span class="icon">*</span> 
 
    <div class="title"> 
 
     <h3>Duration</h3> 
 
     <p>Any</p> 
 
    </div> 
 
    <span class="toggle-switch">^</span> 
 
    </li> 
 
</ul>

來源

2017-08-02 18:29:43 flyer

將圖標添加到收音機輸入結尾

回答

相關問題