css - 在 Chrome 中列出第一行的点

Question

我使用了以下 css 作为页面的下拉功能，但是第一行的点显示在行的后面，除非我在列表前面放一些东西，有什么想法吗？它只发生在 chrome 上，用 IE 没问题谢谢大家

.toggle-box {
  display: none;
}

.toggle-box+label {
  cursor: pointer;
  display: block;
  float: left;
  line-height: 21px;
  margin-bottom: 10px;
  color: #ffffff;
  width: 99%;
  border-radius: 0px 10px;
  border: 2px solid #6ab845;
  padding: 10px 5px 10px 5px;
  background: #004624;
}

.toggle-box+label+div {
  display: none;
  margin-bottom: 10px;
  margin-top: 10px;
}

.toggle-box:checked+label+div {
  display: block;
}

.toggle-box+label:before {
  background-color: #d2d2d2;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  color: #565656;
  content: "+";
  display: block;
  float: left;
  font-weight: bold;
  height: 20px;
  line-height: 20px;
  margin-left: 5px;
  margin-right: 5px;
  text-align: center;
  width: 20px;
}

.toggle-box:checked+label:before {
  content: "\2212";
}

<input class="toggle-box" type="checkbox" id="header1">

<label for="header1">

    <span style="FONT-SIZE: 15px">March 2017</span>

    </label>
<div>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>

Answer 1

发生这种情况的主要原因是下拉列表未包含在标签内。解决这个问题的几种方法:

1) 您可以重组 HTML 以将所有内容包装在一个 div 中并以这种方式包含所有内容，但这将完全重写。

2) 或者您可以只使用小的 CSS 更改，这将使一切正常。将 float: left 添加到包含列表的 div。然后从无序列表中删除边距 margin: 0; 我已经更新了代码片段。我还删除了一些不需要的边距，因为我认为它看起来不再正确了。

.toggle-box {
  display: none;
}

.toggle-box+label {
  cursor: pointer;
  display: block;
  float: left;
  line-height: 21px;
  color: #ffffff;
  width: 99%;
  border-radius: 0px 10px;
  border: 2px solid #6ab845;
  padding: 10px 5px 10px 5px;
  background: #004624;
}

.toggle-box+label+div {
  display: none;
  float: left;
}

.toggle-box+label+div+ul {
  margin: 0;
}

.toggle-box:checked+label+div {
  display: block;
}

.toggle-box+label:before {
  background-color: #d2d2d2;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  color: #565656;
  content: "+";
  display: block;
  float: left;
  font-weight: bold;
  height: 20px;
  line-height: 20px;
  margin-left: 5px;
  margin-right: 5px;
  text-align: center;
  width: 20px;
}

.toggle-box:checked+label:before {
  content: "\2212";
}

<input class="toggle-box" type="checkbox" id="header1">

<label for="header1">

    <span style="FONT-SIZE: 15px">March 2017</span>

    </label>
<div>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>