【问题标题】：Removing bullet in unordered list for switches删除开关无序列表中的项目符号
【发布时间】：2020-10-18 18:24:06
【问题描述】：
我正在尝试在无序列表中显示多个圆形开关。它看起来像这样：https://imgur.com/a/ECIpoAL
现在我注意到，无序列表的项目符号仍然存在，我尝试使用list-style-type: none; 删除它们。但是，这会有点折叠整个列表并且开关重叠。我刚开始使用 html/css，所以我真的不知道那里发生了什么。
HTML
.switches{
border: 1px solid white;
float: right;
margin-right: 40px;
width: 200px;
}
/*
.switches ul{
list-style-type: none; not working
}
*/
.switches ul li{
margin: 13px;
}
.switch {
position: absolute;
display: inline-flex;
right: 20%;
width: 40px;
height: 23px;
float: right;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.switch span{
color: #cdcbcb;
text-shadow: 1px 1px 2px #1a1919;
margin-left: 47px;
margin-top: 4px;
}
.slider:before {
position: absolute;
content: "";
height: 17px;
width: 17px;
left: 4px;
bottom: 3px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(17px);
-ms-transform: translateX(17px);
transform: translateX(17px);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="switches">
<ul>
<li>
<label class="switch">
<input type="checkbox" checked>
<div class="slider round"></div>
<span>Test</span>
</label>
</li>
<li>
<label class="switch">
<input type="checkbox" checked>
<div class="slider round"></div>
<span>Test2</span>
</label>
</li>
</ul>
</div>
</body>
</html>
【问题讨论】：
标签：
html
css
input
switch-statement
html-lists
【解决方案1】：
“collpasing”的问题是由于你的position: absolute在.switch的样式中。
当list-style-type: none; 中没有内容时每个.li。因此.li 将占用no空间。
我对@987654326@ 样式做了一些更改：
.switch {
/* position: absolute; */
position: relative;
display: inline-flex;
right: 20%;
width: 40px;
height: 23px;
/* float: right; <-- you don't need this when `relative`. Otherwise items will still "collpased". */
}
对于您的列表样式：
.switches ul{
list-style-type: none;
}
以下sn-p是修改后的版本：
.switches{
border: 1px solid white;
float: right;
margin-right: 40px;
width: 200px;
}
.switches ul{
list-style-type: none;
}
.switches ul li{
margin: 13px;
}
.switch {
position: relative;
display: inline-flex;
right: 20%;
width: 40px;
height: 23px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.switch span{
color: #cdcbcb;
text-shadow: 1px 1px 2px #1a1919;
margin-left: 47px;
margin-top: 4px;
}
.slider:before {
position: absolute;
content: "";
height: 17px;
width: 17px;
left: 4px;
bottom: 3px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(17px);
-ms-transform: translateX(17px);
transform: translateX(17px);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="switches">
<ul>
<li>
<label class="switch">
<input type="checkbox" checked>
<div class="slider round"></div>
<span>Test</span>
</label>
</li>
<li>
<label class="switch">
<input type="checkbox" checked>
<div class="slider round"></div>
<span>Test2</span>
</label>
</li>
</ul>
</div>
</body>
</html>
希望这会有所帮助。
【解决方案2】：
这是我的建议：
https://jsfiddle.net/sheriffderek/a5nuqtkL/
您需要制定复选框样式 (https://codepen.io/sheriffderek/pen/bGEqEdB) - 但这是布局位的工作方式。确保您逐步增强这些 - 而不是创建无法访问的东西。 （你需要官方标签等）
* { /* https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
box-sizing: border-box;
}
.field-list {
list-style: none;
margin: 0;
padding: auto;
}
.field-list input, .field-list label {
display: block; /* inline by default */
}
.field-list .field {
display: flex;
flex-direction: row;
align-items: center;
}
.field-list label {
padding: 5px 10px;
}
<ul class="field-list">
<li class='field'>
<input id="one" type="checkbox">
<label for="one">Thing one</label>
</li>
<li class='field'>
<input id="two" type="checkbox">
<label for="two">Thing two</label>
</li>
</ul>
【解决方案3】：
将list-style: none; 或list-style-type: none; 与display:flex; 和flex-direction: column; 一起使用以避免项目重叠。
ul{
list-style-type: none;
display: flex;
flex-direction: column;
}
.switches{
border: 1px solid white;
float: right;
margin-right: 40px;
width: 200px;
}
/*
.switches ul{
list-style-type: none; not working
}
*/
.switches ul li{
margin: 13px;
}
.switch {
position: absolute;
display: inline-flex;
right: 20%;
width: 40px;
height: 23px;
float: right;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.switch span{
color: #cdcbcb;
text-shadow: 1px 1px 2px #1a1919;
margin-left: 47px;
margin-top: 4px;
}
.slider:before {
position: absolute;
content: "";
height: 17px;
width: 17px;
left: 4px;
bottom: 3px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(17px);
-ms-transform: translateX(17px);
transform: translateX(17px);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="switches">
<ul>
<li>
<label class="switch">
<input type="checkbox" checked>
<div class="slider round"></div>
<span>Test</span>
</label>
</li>
<li>
<label class="switch">
<input type="checkbox" checked>
<div class="slider round"></div>
<span>Test2</span>
</label>
</li>
</ul>
</div>
</body>
</html>