html - 如何在标签中包裹的收音机中居中文本?
问题描述
我有 2 个自定义单选按钮的简短示例,每个按钮都包含在标签中,因此每个按钮的整个区域都是可点击的(不仅仅是单选按钮)。
我想将自定义方形单选按钮保持在左上角,然后将文本居中在可点击区域的中间。但我无法将文本与自定义单选按钮分开。
感谢任何帮助...
input {
display: none;
}
/*
* Then, style the label so it looks like however you want.
* Here's a quick rundown of how I did it here:
*/
/*
* Some basic positioning styles, and we give it the pointer cursor to show
* that it's clickable
*/
label {
display: inline-block;
padding: 5px 10px;
cursor: pointer;
border: 1px solid gray;
width: 48%;
height: 200px;
float: left;
margin-right: 2%;
}
/*
* With how I decided to build this, the position: relative is super important.
* We're going to position a pseudo element within this element(As it is the containing box)
*/
label span {
position: relative;
line-height: 22px;
}
/*
* Because we're using pseudo elements, a content property is required to make them appear.
*/
label span:before,
label span:after {
content: '';
}
/*
* We are using the :before peudo elemnt as the actual button,
* then we'll position the :after over it. You could also use a background-image,
* font-icon, or really anything if you want different styles.
* For the specific style we're going for, this approach is simply the easiest, but
* once you understand the concept you can really do it however you like.
*/
label span:before {
border: 1px solid #222021;
width: 20px;
height: 20px;
margin-right: 10px;
display: inline-block;
vertical-align: top;
background-color: white;
}
label span:after {
background: #222021;
width: 14px;
height: 14px;
position: absolute;
top: 0px;
left: 3px;
transition: 300ms;
opacity: 0;
}
/*
* This is the most important part of this whole file, if you understand what's happening here
* you can really make this in so many different ways.
*
* We start by selecting the input inside of the label, with "label input". From there we use the
* ":checked" selector to *only* select the input when it is checked. We then use the immediate sibling
* selector(+) to select the span, and then it's pseudo element :after(What we are using to mark the button)
* Because we already styled the :after, all we have to do is set the opacity to 1, making it fade in.
*/
label input:checked+span:after {
opacity: 1;
}
<label style="background-color: #ddd;"><input name="radio" type="radio" /><span>EMAIL</span></label>
<label style="background-color: lightgray;"><input name="radio" type="radio" /><span>PHONE</span> </label>
解决方案
我建议您使用display: flex
将所有内容放在中心,并使用position: absolute
将单选按钮放在左上角。
所以是这样的:
label{
display: flex;
justify-content: center;
align-items: center;
position: relative;
...
}
input[type="radio"]{
position: absolute;
top: 5px;
left: 5px;
}
推荐阅读
- ionic3 - Ionic 3 - Ms Adal :: 如何缓存数据并重新发送
- java - 如何在 OpenJDK 中创建一个新堆?
- c++ - Visual Studio 未在所有文件中找到或替换
- python - 自动运行脚本时出现Powershell错误
- python - 设置 Travis CI 的本地版本
- javascript - 如何在 .NET Core Web API 中异步上传 Word 文件并保存到文件夹中
- excel - 每当特定文本出现在列中时,Excel VBA 弹出窗口
- javascript - 当应用程序已安装时,Sheet Add-on Menu items 会显示“install add-on”菜单
- jquery - base64 格式的图像大小增加
- ios - iOS 13 推送通知的标头字段配置在哪里?