为什么我的 UL 列表是水平显示的？

Question

我试图让我的页脚水平显示 4 <ul> 但它垂直显示我试过 display:inline; 但没用这是代码

.row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.row::after {
  display: table;
  clear: both;
  content: "";
}

.col-5 {
  width: 41.66%;
}

<footer class="grey">
  <row>
    <div class="col-3">
      <h1>Company</h1>
      <ul>
        <li>About</li>
        <li>Carrers</li>
        <li>Blogs</li>
      </ul>

    </div>

    <div class="col-3">
      <h1>Company</h1>
      <ul>
        <li>About</li>
        <li>Carriers</li>
        <li>Blogs</li>
      </ul>

    </div>

    <div class="col-3">
      <h1>Company</h1>
      <ul>
        <li>About</li>
        <li>Carriers</li>
        <li>Blogs</li>
      </ul>

    </div>

    <div class="col-3">
      <h1>Company</h1>
      <ul>
        <li>About</li>
        <li>Carriers</li>
        <li>Blogs</li>
      </ul>

    </div>
  </row>
</footer>

Answer 1

如果你想让这个导航无序列表水平，你基本上有两个选择：

使列表项内联而不是默认块。 .li { 显示：内联；这不会在列表项之后强制中断，它们将尽可能水平排列。浮动列表项。由于我们经常希望我们的列表项显示为块，以便我们能够在它们上设置固定宽度，我们被迫将它们向左或向右浮动以水平排列它们。

来源：

https://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/

Answer 2

因为你想让你的<ul>是水平的，所以你用错了row。考虑到您正在使用 bootstrap，它应该作为 class 应用而不是用作标签。从这里阅读更多关于 bootstrap 网格系统的信息 - https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

.row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.row::after {
  display: table;
  clear: both;
  content: "";
}

.col-5 {
  width: 41.66%;
}

<footer class="grey">
  <div class="row">
    <div class="col-3">
      <h1>Company</h1>
      <ul>
        <li>About</li>
        <li>Carrers</li>
        <li>Blogs</li>
      </ul>

    </div>

    <div class="col-3">
      <h1>Company</h1>
      <ul>
        <li>About</li>
        <li>Carriers</li>
        <li>Blogs</li>
      </ul>

    </div>

    <div class="col-3">
      <h1>Company</h1>
      <ul>
        <li>About</li>
        <li>Carriers</li>
        <li>Blogs</li>
      </ul>

    </div>

    <div class="col-3">
      <h1>Company</h1>
      <ul>
        <li>About</li>
        <li>Carriers</li>
        <li>Blogs</li>
      </ul>

    </div>
  </row>
</footer>

.row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.row::after {
  display: table;
  clear: both;
  content: "";
}

.col-5 {
 width: 41.66%;
}

<footer class="grey">
  <div class="row">
    <div class="col-3">
      <h1>Company</h1>
      <ul>
        <li>About</li>
        <li>Carrers</li>
        <li>Blogs</li>
      </ul>

    </div>

    <div class="col-3">
      <h1>Company</h1>
      <ul>
        <li>About</li>
        <li>Carriers</li>
        <li>Blogs</li>
      </ul>

    </div>

    <div class="col-3">
      <h1>Company</h1>
      <ul>
        <li>About</li>
        <li>Carriers</li>
        <li>Blogs</li>
      </ul>

    </div>

    <div class="col-3">
      <h1>Company</h1>
      <ul>
        <li>About</li>
        <li>Carriers</li>
        <li>Blogs</li>
      </ul>

    </div>
  </div>
</footer>

为什么我的 UL 列表是水平显示的？

Why my UL lists are displayed horizontal?

css

twitter-bootstrap

html-lists

footer