将图标添加到收音机输入div

Question

我尝试使用无线电输入创建如下的类似用户界面。大多数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没有正确应用背景。代码在生产上运行良好。

Answer 1

而不是“＆lt;”您可以使用具有适当间距的相应图标

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>

Answer 2

我为每个广播项目创建了一个类 .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;
}

Answer 3

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