マルチカラムCSSが正しく分割されない

Question

私はCSSマルチカラムを持っています：Firefoxでは（<ul>のコンテンツは '壊れていません'）、クロムにはありません（最初のカラムにある項目は2番目に分割されます）。私はthis solutionを見つけましたが、どこにでもコードを配置することはできません。

.margin-bottom-0 { margin-bottom: 0; } 
 
.double > ul { 
 
    columns: 2; 
 
    padding: 0; 
 
} 
 
.double > ul ul { 
 
    padding-left: 10px; 
 
    list-style: circle; 
 
} 
 
.double > ul ul li { 
 
    padding-left: 5px; 
 
} 
 
.double li { 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    list-style-position: inside; 
 
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-8"> 
 
     <div class="double"> 
 
     <ul class="list-unstyled margin-bottom-0"> 
 
      <li><a href="#">Area docenti</a> 
 
      <ul> 
 
       <li><a href="#">Docenti e classi</a></li> 
 
      </ul> 
 
      </li> 
 
      <li><a href="#">Area segreteria</a> 
 
      <ul> 
 
       <li><a href="#">Organigramma</a></li> 
 
       <li><a href="#">D. S. G. A.</a></li> 
 
       <li><a href="#">U. R. P.</a></li> 
 
       <li><a href="#">Comunicazioni interne personale ATA</a></li> 
 
       <li><a href="#">Programma annuale</a></li> 
 
       <li><a href="#">Modulistica</a></li> 
 
       <li><a href="#">SIDI - Miur</a></li> 
 
      </ul> 
 
      </li> 
 
      <li><a href="#">Area genitori</a> 
 
      <ul> 
 
       <li><a href="#">Rappresentanti dei genitori</a></li> 
 
       <li><a href="#">Ricevimento docenti</a></li> 
 
       <li><a href="#">Patto di corresponsabilità</a></li> 
 
       <li><a href="#">Libri di testo</a></li> 
 
       <li><a href="#">Siti tematici</a></li> 
 
       <li><a href="#">Iscrizioni On Line</a></li> 
 
      </ul> 
 
      </li> 
 
      <li><a href="#">Area alunni</a> 
 
       <ul> 
 
        <li><a href="#">Viaggi di istruzione</a></li> 
 
        <li><a href="#">Materiale didattico</a></li> 
 
        <li><a href="#">Concorsi</a></li> 
 
        <li><a href="#">Visite guidate</a></li> 
 
        <li><a href="#">Attività e progetti</a></li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#m">Il Dirigente</a></li> 
 
      <li><a href="#">Organi collegiali</a></li> 
 
      <li><a href="#">Piano di lavoro</a> 
 
      <ul> 
 
       <li><a href="#">POF</a></li> 
 
       <li><a href="#">PTOF</a></li> 
 
       <li><a href="#">PON</a></li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

あなたは右の "liberの複数形・ディ・TESTO" の後に、最初の列にする必要があり、 "SITIのtematici" と "オンラインIscrizione" を参照してください：ここでは

がいっぱいスニペットです（それらは同じ <ul>の一部です）：代わりに、2番目の列に進みます。

さらに見ると、私は、省略記号が必要なのはFirefoxとChromeの正しい動作を引き起こしていることを発見しました。その行を削除すると、FirefoxとChromeの両方が（間違った） '壊れた' <ul>しかし、少なくとも彼らは一致しています...

正しい方法で欄が省略されている場合は、省略記号をつけてください。

Answer 1

あなたは>ここbreak inside

、以下のコードスニペットの詳細を参照してくださいli

にbreak-inside:avoidを使用する必要があります。完全に

.margin-bottom-0 { 
 
    margin-bottom: 0; 
 
} 
 

 
.double >ul { 
 
    columns: 2; 
 
    padding: 0; 
 
} 
 

 
.double > ul ul { 
 
    padding-left: 10px; 
 
    list-style: circle; 
 
} 
 

 
.double > ul ul li { 
 
    padding-left: 5px; 
 
} 
 

 
.double li { 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    list-style-position: inside; 
 
    -webkit-column-break-inside: avoid; 
 
    /* Chrome, Safari, Opera */ 
 
    page-break-inside: avoid; 
 
    /* Firefox */ 
 
    break-inside: avoid; 
 
    /* IE 10+ */ 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-8"> 
 
     <div class="double"> 
 
     <ul class="list-unstyled margin-bottom-0"> 
 
      <li><a href="#">Area docenti</a> 
 
      <ul> 
 
       <li><a href="#">Docenti e classi</a></li> 
 
      </ul> 
 
      </li> 
 
      <li><a href="#">Area segreteria</a> 
 
      <ul> 
 
       <li><a href="#">Organigramma</a></li> 
 
       <li><a href="#">D. S. G. A.</a></li> 
 
       <li><a href="#">U. R. P.</a></li> 
 
       <li><a href="#">Comunicazioni interne personale ATA</a></li> 
 
       <li><a href="#">Programma annuale</a></li> 
 
       <li><a href="#">Modulistica</a></li> 
 
       <li><a href="#">SIDI - Miur</a></li> 
 
      </ul> 
 
      </li> 
 
      <li><a href="#">Area genitori</a> 
 
      <ul> 
 
       <li><a href="#">Rappresentanti dei genitori</a></li> 
 
       <li><a href="#">Ricevimento docenti</a></li> 
 
       <li><a href="#">Patto di corresponsabilità</a></li> 
 
       <li><a href="#">Libri di testo</a></li> 
 
       <li><a href="#">Siti tematici</a></li> 
 
       <li><a href="#">Iscrizioni On Line</a></li> 
 
      </ul> 
 
      </li> 
 
      <li><a href="#">Area alunni</a> 
 
      <ul> 
 
       <li><a href="#">Viaggi di istruzione</a></li> 
 
       <li><a href="#">Materiale didattico</a></li> 
 
       <li><a href="#">Concorsi</a></li> 
 
       <li><a href="#">Visite guidate</a></li> 
 
       <li><a href="#">Attività e progetti</a></li> 
 
      </ul> 
 
      </li> 
 
      <li><a href="#m">Il Dirigente</a></li> 
 
      <li><a href="#">Organi collegiali</a></li> 
 
      <li><a href="#">Piano di lavoro</a> 
 
      <ul> 
 
       <li><a href="#">POF</a></li> 
 
       <li><a href="#">PTOF</a></li> 
 
       <li><a href="#">PON</a></li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>