gpt4 book ai didi

html - 水平放置的绝对按钮只是相互叠加

转载 作者:行者123 更新时间:2023-11-28 10:24:18 25 4
gpt4 key购买 nike

我通过将标签绝对定位在复选框顶部来设置 toogle 按钮。我需要它们水平对齐,但它们只是相互叠加。

<ul style="display: block; float: left;">
<li style="display: inline-block;">
<div class="btn_wrapper">
<input type="checkbox" value="1" id="newest" name=""/>
<label class="btn btn-sm btn-default" for="newest">Newest</label>
</div>
</li>
<li style="display: inline-block;">
<div class="btn_wrapper">
<input type="checkbox" value="1" id="popular" name=""/>
<label class="btn btn-sm btn-default" for="popular">Popular</label>
</div>
</li>
<li style="display: inline-block;">
<div class="btn_wrapper">
<input type="checkbox" value="1" id="price" name=""/>
<label class="btn btn-sm btn-default" for="price">Price</label>
</div>
</li>
</ul>


ul {
display: block;
li {
display: inline-block
.btn_wrapper {
position: relative;
clear: both;

label {
display: block;
cursor: pointer;
position: absolute;
top: 5px;
left: 5px;
z-index: 1;
background-color: #CCC;
}

input[type=checkbox], input[type=radio] {
position: absolute;
top: 5px;
left: 5px;
}

input[type=checkbox]:checked + label {
color: $shop_color_text_strong;
}
}
}
}

这是它的样子:

enter image description here

最佳答案

这就是我最终要做的。基本上在我的输入中添加 display: none 并从标签中删除绝对位置,效果很好。

ul {
display: block;
li.filter_btn {
margin-left: -2px;
}
li {
display: inline-block;
width: auto;
height: 30px;
label {
display: block;
cursor: pointer;
top: 5px;
left: 5px;
z-index: 1;
width: auto;
background-color: #CCC;
}

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

input[type=checkbox]:checked + label {
color: $shop_color_text_strong;
}
}
}

关于html - 水平放置的绝对按钮只是相互叠加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23812719/

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