使用 Flexbox 将内联 ul 彼此相邻包装答案

【问题标题】：Wrap inline ul next to each other with Flexbox使用 Flexbox 将内联 ul 彼此相邻包装
【发布时间】：2020-03-27 04:56:22
【问题描述】：

基本上这就是我想要的：

我想要 uls 换行。我给每个列表设置了 10rem 的宽度以使它们成为块元素，但我实际上希望宽度是 li 的大小。

.list {
    display: flex;
    flex-wrap: wrap;
  }

.design-list, .motion-list, .dev-list {
    width: 10rem;
  }

<h2>Tools</h2>
      <div class="lists">
        <div class="design-list">
          <h3>Design</h3>
          <ul>
            <li>Photoshop</li>
            <li>Illustrator</li>
            <li>XD</li>
          </ul>
        </div>
        <div class="motion-list">
          <h3>Motion</h3>
          <ul>
            <li>After Effects</li>
            <li>Premiere Pro</li>
          </ul>
        </div>
        <div class="dev-list">
          <h3>Front-End Development</h3>
          <ul>
            <li>HTML5</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>JQuery</li>
            <li>Bootstrap</li>
            <li>Java</li>
          </ul>
        </div>
      </div>

【问题讨论】：

同样在 css 选择器中将 .list 更改为 .lists 然后将应用 flex 属性。
@AneesIjaz 哦，谢谢，就是这样。我觉得很愚蠢。

标签： javascript html css flexbox

【解决方案1】：

ul 和 li 默认有边距或内边距，具体取决于浏览器。您需要在菜单中覆盖此默认样式：

ul, li {
    margin: 0; padding: 0;
}

.lists {
    display: flex;
    flex-wrap: wrap;
    
  }

.design-list, .motion-list, .dev-list {
    width: 10rem;
  }

ul, li {
    margin:0;
    padding: 0;
    list-style-type:none;
}

<h2>Tools</h2>
      <div class="lists">
        <div class="design-list">
          <h3>Design</h3>
          <ul>
            <li>Photoshop</li>
            <li>Illustrator</li>
            <li>XD</li>
          </ul>
        </div>
        <div class="motion-list">
          <h3>Motion</h3>
          <ul>
            <li>After Effects</li>
            <li>Premiere Pro</li>
          </ul>
        </div>
        <div class="dev-list">
          <h3>Front-End Development</h3>
          <ul>
            <li>HTML5</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>JQuery</li>
            <li>Bootstrap</li>
            <li>Java</li>
          </ul>
        </div>
      </div>

【讨论】：