Question

我今天花了太多时间在考虑这个问题，所以我想问一下互联网的蜂巢思想。

我有一个标准<ul>，其中包含许多<li>个元素（目前为12个，但可能有所不同）。我想将它们排列成等宽的2列，同时也不要使<ul>跨满整个块的宽度。不幸的是，该解决方案还需要支持IE11（之前没有）。任何解决方案都需要响应，因此无需设置非百分比宽度。我尝试了几种不同的情况（您希望将代码段扩展为全屏显示）：

解决方案1（网格）：

*{
  box-sizing: border-box;
}
div{
  display: flex;
  justify-content: center;
}
ul{
  list-style: none;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
}
li{
   padding: 15px;
}

<div>
  <ul>
    <li>In maximus viverra scelerisque. Vestibulum dignissim ex non</li>
    <li>Sed suscipit, turpis in suscipit consectetur, ante sem.</li>
    <li>Ut et mauris et dui gravida fringilla ut.</li>
    <li>Nullam iaculis fermentum sodales. Proin commodo eleifend lacus.</li>
    <li>Sed molestie, libero at hendrerit sollicitudin, enim nisi.</li>
    <li>Mauris a facilisis dolor. Sed pharetra hendrerit dolor.</li>
    <li>Sed vitae felis tellus. Quisque sagittis, felis vitae.</li>
    <li>Integer et elit metus. Cras congue vestibulum hendrerit.</li>
    <li>Fusce suscipit ante sed tristique euismod. Duis quis.</li>
    <li>Vestibulum quam felis, fringilla in justo malesuada, tristique.</li>
    <li>Integer volutpat quam sed urna iaculis mollis. Maecenas.</li>
    <li>Nullam dignissim ipsum vitae finibus dignissim. Nam viverra.</li>
  </ul>
</div>

以上解决方案基本上可以完美地工作-将<li>排列在两列中，UL集中在包含的flex div中。但是当然IE会有问题，尽管我可以使用IE前缀in the old spec，但仍需要为每个li手动分配列/行位置，这对于可能具有任何数量的元素。

解决方案2（灵活）：

*{
    box-sizing: border-box;
}
div {
  display: flex;
  justify-content: center;
}

ul {
  list-style: none;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  display: inline-flex;
  flex-wrap: wrap;
}

li {
  padding: 15px;
  width: 50%;
}

<div>
  <ul>
    <li>In maximus viverra scelerisque. Vestibulum dignissim ex non</li>
    <li>Sed suscipit, turpis in suscipit consectetur, ante sem.</li>
    <li>Ut et mauris et dui gravida fringilla ut.</li>
    <li>Nullam iaculis fermentum sodales. Proin commodo eleifend lacus.</li>
    <li>Sed molestie, libero at hendrerit sollicitudin, enim nisi.</li>
    <li>Mauris a facilisis dolor. Sed pharetra hendrerit dolor.</li>
    <li>Sed vitae felis tellus. Quisque sagittis, felis vitae.</li>
    <li>Integer et elit metus. Cras congue vestibulum hendrerit.</li>
    <li>Fusce suscipit ante sed tristique euismod. Duis quis.</li>
    <li>Vestibulum quam felis, fringilla in justo malesuada, tristique.</li>
    <li>Integer volutpat quam sed urna iaculis mollis. Maecenas.</li>
    <li>Nullam dignissim ipsum vitae finibus dignissim. Nam viverra.</li>
  </ul>
</div>

尽管上述解决方案在技术上是可以接受的（包括IE11在内都可以很好地工作），但是这里的问题是视觉吸引力。由于<ul>现在跨越了整个宽度，尽管居中位于包含的flex div中，所以<li>跨越了50％且文本左对齐，在每个文本的右侧留有较大的可视空白列（需要宽屏才能看到额外的空间）。

解决方案3（IE11的表格）：

我不会为这个发布一个摘要，因为它吸引力最小。从本质上讲，它涉及专门针对IE11，将<ul>设置为display:table;，将<li>设置为display:table-cell; float: left; width: 50%; ...长话短说，这仍然是一团糟视觉上无法工作。

我应该减少损失并采用解决方案2吗？如果可能的话，我真的很想获得解决方案1的视觉布局...有什么想法吗？

Answer 1

display: flex;属性会将元素转换为仅影响直接子元素布局的flex容器，因此，如果仅位于外部div上，则仅影响子元素的布局。 ul是直子。因此，我在display: flex;元素中添加了ul，因此所包含的子li元素获得了灵活的布局。有关flexbox的更多信息的好资源：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

为了解决多余的空白，我在ul上添加了一个小于100％的最大宽度，以使宽度不会一直延伸到边缘，请根据需要调整此值。我还更改了li元素上的填充，只更改了左侧和右边的填充，并添加了margin-bottom以将它们垂直隔开。

最后，我建议您在div包装器中添加一个类，以便可以根据上下文定位所有内容，否则您的CSS定位div会影响网站中的每个div，有问题的。

* {
    box-sizing: border-box;
}
.wrapper {
  display: flex;
  justify-content: center;
}

.wrapper ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 90%; // adjust the width compared to the container
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.wrapper li {
  padding: 0 15px; // padding right and left only
  margin-bottom: 20px; // vertical spacing between li elements
  width: 50%;
}

<div class="wrapper">
  <ul>
    <li>In maximus viverra scelerisque. Vestibulum dignissim ex non</li>
    <li>Sed suscipit, turpis in suscipit consectetur, ante sem.</li>
    <li>Ut et mauris et dui gravida fringilla ut.</li>
    <li>Nullam iaculis fermentum sodales. Proin commodo eleifend lacus.</li>
    <li>Sed molestie, libero at hendrerit sollicitudin, enim nisi.</li>
    <li>Mauris a facilisis dolor. Sed pharetra hendrerit dolor.</li>
    <li>Sed vitae felis tellus. Quisque sagittis, felis vitae.</li>
    <li>Integer et elit metus. Cras congue vestibulum hendrerit.</li>
    <li>Fusce suscipit ante sed tristique euismod. Duis quis.</li>
    <li>Vestibulum quam felis, fringilla in justo malesuada, tristique.</li>
    <li>Integer volutpat quam sed urna iaculis mollis. Maecenas.</li>
    <li>Nullam dignissim ipsum vitae finibus dignissim. Nam viverra.</li>
  </ul>
</div>

适用于UL的2列CSS Flex / Grid

1 个答案: