Chromeの最初の行の点のリスト

Question

次のCSSをページのドロップダウン機能として使用しましたが、最初の行のドットポイントは行の後ろに表示されます。リスト、任意のアイデア？ 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

をChromeに起こっています。それを修正するにはいくつかの方法があります：

1）HTMLを再構成してdiv内のすべてを折り返し、そのようにすべてを含むようにすることができますが、全体を書き直すことができます。

2）また、すべての機能が動作するように小さなCSS変更を使用することもできます。リストを含むdivにfloat: leftを追加します。順序付けられていないリストから余白を取り除く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>