gpt4 book ai didi

css - 将复选框左对齐

转载 作者:行者123 更新时间:2023-11-28 03:04:15 24 4
gpt4 key购买 nike

我已经设置了复选框的样式,但出于某种原因,我无法让复选框顶部 float 在文本的左侧。我已经尝试过 floats inlines blocks 似乎没有任何效果。我能够将文本向右浮动,但它在方框和文本之间留下了很大的空隙

.regular-checkbox {
display: none;
}

.regular-checkbox + label {
background-color: #f0f0ee;
border: 1px solid #dcdcda;
box-shadow: none;
padding: 9px;
border-radius: 0px;
display: inline-block;
position: relative;
}

.regular-checkbox + label:active, .regular-checkbox:checked + label:active {
box-shadow: none;
}

.regular-checkbox:checked + label {
background-color: #f0f0ee;
border: 1px solid #dcdcda;
box-shadow: none;
color: #99a1a7;
}

.regular-checkbox:checked + label:after {
content: '\2714';
font-size: 15px;
position: absolute;
top: -4px;
left: 3px;
color: #99a1a7;
}


.tag {
position: relative;
top: 0px;
display: block;
float: left;
font-size: 13px;
color: #000;
}
    <div class="large-12 columns">
<div>
<div class="tag">Box 1</div>
<input type="checkbox" id="checkbox-1-1" class="regular-checkbox"><label for="checkbox-1-1"></label>
</div>
<div>
<div class="tag">Box 2</div>
<input type="checkbox" id="checkbox-2-1" class="regular-checkbox"><label for="checkbox-2-1"></label>
</div>
</div>

最佳答案

要么您可以更改您的 html 标记,即在 checkbox, label 之后添加 .tag 并轻松解决该问题,或者使用 css left 属性在 text 之前对齐 check-box

HTML 的变化可能是这样的,

.regular-checkbox {
display: none;
}

.regular-checkbox + label {
background-color: #f0f0ee;
border: 1px solid #dcdcda;
box-shadow: none;
padding: 9px;
border-radius: 0px;
display: inline-block;
position: relative;
}

.regular-checkbox + label:active,
.regular-checkbox:checked + label:active {
box-shadow: none;
}

.regular-checkbox:checked + label {
background-color: #f0f0ee;
border: 1px solid #dcdcda;
box-shadow: none;
color: #99a1a7;
}

.regular-checkbox:checked + label:after {
content: '\2714';
font-size: 15px;
position: absolute;
top: -4px;
left: 3px;
color: #99a1a7;
}

.tag {
position: relative;
top: 0px;
display: inline-block;
font-size: 13px;
color: #000;
vertical-align: top;
}
<div class="large-12 columns">
<div>
<input type="checkbox" id="checkbox-1-1" class="regular-checkbox">
<label for="checkbox-1-1"></label>
<div class="tag">Box 1</div>
</div>
<div>
<input type="checkbox" id="checkbox-2-1" class="regular-checkbox">
<label for="checkbox-2-1"></label>
<div class="tag">Box 2</div>
</div>
</div>

这使用 CSS left 属性。

.regular-checkbox {
display: none;
}

.regular-checkbox + label {
background-color: #f0f0ee;
border: 1px solid #dcdcda;
box-shadow: none;
padding: 9px;
border-radius: 0px;
display: inline-block;
position: relative;
left: -30px;
}

.regular-checkbox + label:active,
.regular-checkbox:checked + label:active {
box-shadow: none;
}

.regular-checkbox:checked + label {
background-color: #f0f0ee;
border: 1px solid #dcdcda;
box-shadow: none;
color: #99a1a7;
}

.regular-checkbox:checked + label:after {
content: '\2714';
font-size: 15px;
position: absolute;
top: -4px;
left: 3px;
color: #99a1a7;
}

.tag {
position: relative;
top: 0px;
display: block;
float: left;
font-size: 13px;
color: #000;
left: 25px;
}
<div class="large-12 columns">
<div>
<div class="tag">Box 1</div>
<input type="checkbox" id="checkbox-1-1" class="regular-checkbox">
<label for="checkbox-1-1"></label>
</div>
<div>
<div class="tag">Box 2</div>
<input type="checkbox" id="checkbox-2-1" class="regular-checkbox">
<label for="checkbox-2-1"></label>
</div>
</div>

关于css - 将复选框左对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46024368/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com