将图标添加到收音机输入结尾

我正在尝试使用无线电输入创建类似的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

将图标添加到收音机输入结尾

回答

相关问题