Question

基本上这就是我想要的：

我要让乌尔来回包裹。我给每个列表一个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>

Answer 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>

使用Flexbox将内联ul彼此包装

1 个答案: