0

我正在尝试使用columnCSS 属性设置一个 2 列列表（在桌面屏幕上）：

.footer .double li {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.footer .double > ul ul {
  padding-left: 40px;
  list-style: circle;
}
.footer .double > ul ul li {
  overflow: visible;
}
.footer .double > ul ul li div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (min-width: 992px) {
  .footer .double > ul {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
  }
  .footer .double > ul ul {
    columns: 1;
    -webkit-columns: 1;
    -moz-columns: 1;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="footer">
  <div class="container">
    <div class="row">
      <div class="col-sm-4 col-md-3 margin-bottom-20">
        <img src="http://lorempixel.com/800/400" alt="" class="img-responsive">
      </div>
      <div class="col-sm-4 col-md-6 margin-bottom-20">
        <h3 class="margin-top-0">Mappa del sito</h3>
        <div class="double">
          <!-- subcolumn -->
          <ul class="list-unstyled margin-bottom-0">
            <li><a href="#">Lorem ipsum dolor sit amet, consectetur.</a></li>
            <li><a href="#">Lorem ipsum dolor sit amet. Tenetur, minus.</a></li>
            <li><a href="#">Odio recusandae et officiis hic fuga corrupti. </a>
              <ul>
                <li><div><a href="#">Sequi aut amet nisi qui eveniet</a></div></li>
                <li><div><a href="#">Ipsam, velit exercitationem dolor sit amet</a></div></li>
              </ul>
            </li>
            <li><a href="#">Illo dolore, amet nam ipsum possimus.</a>
              <ul>
                <li><div><a href="#">Numquam sunt, adipisci necessitatibus.</a></div></li>
                <li><div><a href="#">Facere cum temporibus velit illum amet</a></div></li>
              </ul>
            </li>
            <li><a href="#">Quisquam libero corrupti repellendus</a></li>
            <li><a href="#">Laboriosam corporis, fuga accusantium ipsa</a>
              <ul>
                <li><div><a href="#">Dolore, consectetur atque</a></div></li>
              </ul>
            </li>
            <li><a href="#">Lorem ipsum dolor sit amet, consectetur.</a></li>
            <li><a href="#">Officia harum animi consequuntur velit</a></li>
          </ul>
          <!-- /subcolumn -->
        </div>
      </div>
      <div class="col-sm-4 col-md-3 margin-bottom-20">
        <img src="http://lorempixel.com/800/400" alt="" class="img-responsive">
      </div>
    </div>
  </div>
</div>

在 Firefox 中一切都很好：我可以在子列表中看到圆点，并且列在顶部正确对齐。

在Chrome中，一场灾难：子列表没有圆点，列不对齐（似乎第二列是中间对齐而不是顶部对齐）

我写了一个Fiddle来显示这个问题。

4

1 回答 1

0

这种差异可以用 来固定"list-style-position"。浏览器 chrome 在元素外部绘制圆圈，当您"overflow:hidden"在".footer .double li". 然后"list-style-position: outside;"在你的 UL 中使用你修复它

于 2016-01-27T19:33:17.137 回答