防止列表包裹在内联块下？答案

【问题标题】：Prevent list from wrapping under inline block?防止列表包裹在内联块下？
【发布时间】：2021-08-18 10:51:10
【问题描述】：

我试图让这个列表居中，但是当我添加内联块时，它会换行。那么如何让这个列表不换行并垂直显示在一行中呢？空白：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 -->

【问题讨论】：

为什么首先使用inline-block而不是flexbox？
希望它居中。
和？ flexbox 可用于垂直和水平居中元素。再说一遍，为什么是 inline-block 而不是 flexbox？
你能举个例子吗？当我使用 flexbox 时它不会居中。
删除：.nav li { display: inline-block; }; 添加：.nav ul { display: flex; flex-direction: column-reverse; align-items: center; }

标签： html css tailwind-css

【解决方案1】：

现在都是垂直的

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

【讨论】：

是的，但现在它没有居中。
当人们还在习惯 HTML 和 CSS 中的 box 模型的细节时，使用 flex box 会让人很难理解如何实现所需要的。将this 添加到等式中，您就有了一个完美的解决问题的公式。在学习 CSS 布局时，Flex 盒子有点难以理解。这就是我昨天推荐 display: inline-block 的原因。仍然想确切地了解您的需求。总之祝你好运！也许一个带有任何小软件的小图表会照亮它，我们都学习！
@lanpierre 我相信您评论了错误的帖子。您关于 flexbox 支持的链接已经过时了。它必须是从 2012 年开始的。自 2013 年以来，您支持 Opera 以及 Opera 的最后一个错误，在 2015 年修复。IE 也完全支持 flexbox。
此引用是否不正确：caniuse.com/?search=Flexbox。另外，正如我在评论中提到的：参数的数量和逻辑本身并不直观，理解之前的盒子模型的基础是基础。这不正确吗？
另一个关于 flexbox 可能遇到的问题的提及：developer.mozilla.org/en-US/docs/Web/CSS/…

【解决方案2】：

正如评论中已经写的那样，我实际上会用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 -->

【讨论】：