Question

我试图将这个列表居中，但是当我添加 inline-block 时，它会换行。那么我怎样才能让这个列表不换行并垂直显示在一行中呢？空白：nowrap 似乎不起作用，我没有其他想法来尝试修复它。

.mobile-nav {
    background-color: rgba(255, 255, 255, 0.9);
    position: fixed;
    top: 0;
    bottom: 0;
    left:  0;
    width: 4rem;
    border-style: solid;
    border-right-width: 1px;
    border-color: rgba(243, 244, 246, 1.0);
    z-index: 10;
    background-color: lightgray;
}

.nav {
    background-color: lightblue;
}

.nav li {
    display: inline-block;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: scale(-1);
    margin-bottom: 50px;
    font-weight: 600;
    font-size: 0.85rem;
    background-color: coral;
    white-space: nowrap
}

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<!-- left side container -->
<div class="fixed top-0 bottom-0 left-0 w-16 border-r border-gray-100 z-10 mobile-nav">
<!-- left side container content -->
<div class="fixed bottom-16 left-0 w-16 select-none">
    <!-- navigation -->
    <nav class="nav block w-full text-center">
        <ul>
            <li>
                <a href="#">Test 1</a>
            </li>
            <li>
                <a href="#">Test 2</a>
            </li>
            <li>
                <a href="#">Test 3</a>
            </li>
            <li>
                <a href="#">Test 4</a>
            </li>
            <li>
                <a href="#">Test 5</a>
            </li>
        </ul>
    </nav><!-- end navigation -->
</div>
</div> <!-- end left side container -->

Answer 1

正如评论中已经写的那样，我实际上会用 flexbox 来解决这个问题。为此，您应该首先删除：nav li { display: inline-block; } 此行是多余的，可能会导致 flexbox 解决方案出现问题。

要使用 flexbox，我们首先需要通过添加启用它：nav ul { display: flex; }

为了让列表项在彼此下方而不是彼此相邻，我们需要添加：nav ul { flex-direction: column-reverse; }。 flex-direction 确定项目彼此对齐的方向。因为我们希望它们位于彼此下方，所以我们使用 column。

最后但并非最不重要的是，我们需要添加：nav ul { justify-content: center; }。这条线将使元素在垂直中心居中。这才是你真正的目标。

.mobile-nav {
  background-color: rgba(255, 255, 255, 0.9);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4rem;
  border-style: solid;
  border-right-width: 1px;
  border-color: rgba(243, 244, 246, 1.0);
  z-index: 10;
  background-color: lightgray;
}

nav {
  background-color: lightblue;
}

nav ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

nav li {
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: scale(-1);
  margin-bottom: 50px;
  font-weight: 600;
  font-size: 0.85rem;
  background-color: coral;
  white-space: nowrap
}

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
<!-- left side container -->
<div class="fixed top-0 bottom-0 left-0 w-16 border-r border-gray-100 z-10 mobile-nav">
  <!-- left side container content -->
  <div class="fixed bottom-16 left-0 w-16 select-none">
    <!-- navigation -->
    <nav class="nav block w-full text-center">
      <ul>
        <li>
          <a href="#">Test 1</a>
        </li>
        <li>
          <a href="#">Test 2</a>
        </li>
        <li>
          <a href="#">Test 3</a>
        </li>
        <li>
          <a href="#">Test 4</a>
        </li>
        <li>
          <a href="#">Test 5</a>
        </li>
      </ul>
    </nav>
    <!-- end navigation -->
  </div>
</div>
<!-- end left side container -->

Answer 2

现在都是垂直的

.mobile-nav {
    background-color: rgba(255, 255, 255, 0.9);
    position: fixed;
    top: 0;
    bottom: 0;
    left:  0;
    width: 4rem;
    border-style: solid;
    border-right-width: 1px;
    border-color: rgba(243, 244, 246, 1.0);
    z-index: 10;
    background-color: lightgray;
}

.nav {
    background-color: lightblue;
}

.nav li {
    display: inline-block;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: scale(-1);
    margin-bottom: 50px;
    font-weight: 600;
    font-size: 0.85rem;
    background-color: coral;
    white-space: nowrap
}

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<!-- left side container -->
<div class="fixed top-0 bottom-0 left-0 w-16 border-r border-gray-100 z-10 mobile-nav">
<!-- left side container content -->
<div class="fixed bottom-16 left-0 w-16 select-none">
    <!-- navigation -->
    <nav class="nav block w-full h-full text-center flex flex-col justify-center">
        <ul class="flex no-wrap flex-col justify-center h-full align-items-center>
            <li>
                <a href="#">Test 1</a>
            </li>
            <li>
                <a href="#">Test 2</a>
            </li>
            <li>
                <a href="#">Test 3</a>
            </li>
            <li>
                <a href="#">Test 4</a>
            </li>
            <li>
                <a href="#">Test 5</a>
            </li>
        </ul>
    </nav><!-- end navigation -->
</div>
</div> <!-- end left side container -->

防止列表包装在内联块下？

2 个答案: