display:inline 不起作用，但 display:flex 起作用答案

【问题标题】：display:inline doesnt work but display:flex doesdisplay:inline 不起作用，但 display:flex 起作用
【发布时间】：2016-10-17 03:44:11
【问题描述】：

所以，我能够以一种方式获得水平导航栏，但不能以另一种方式获得，我对为什么感到困惑。当我使用float:left 时也会发生奇怪的事情，所以我不确定我的元素是否以最佳格式标记。相关的html和css如下：

<nav class="main-nav">
    <ul class="navtext">
        <li><a href="index.html">Index</a></li>
        <li><a href="p2.html">P2</a></li>
        <li><a href="p3.html">P3</a></li>
    </ul>
</nav>

.main-nav {
    padding-top: 0px; 
    padding-bottom: 0px; 
    padding-left: 60px; 
    padding-right: 60px; 
    background-image: url("images/navimage.jpg");
    text-align: center;
    border: solid 10px black;
    font-size: 20px;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}


.navtext {
    list-style: none;
    padding: 3rem;
    margin: none;
    display: flex;
}

我尝试将整个导航作为主导航，但随后列出样式：无无效

编辑：我也很难通过填充来影响索引 p2 和 p3 之间的间隙。我将填充添加到.navtext 中，它只会影响所有三个链接周围的填充，而不是它们之间的填充。

【问题讨论】：

你能更清楚地描述你的问题，也许放一些截图。如果有关于您的问题的更多信息，我想我可以提供帮助。
请更清楚并发布一个jsfiddle
[ jsfiddle.net/tjbaezid/bhjkbeu8 ] 这是您编辑部分的小提琴。您用于填充 li 元素的 CSS 选择器应该是这样的 .navtext li{ } 和 MR。罗伯特已经为您描述了整个展示部分。所以我认为你很清楚你想要什么。 :)

标签： html css flexbox

【解决方案1】：

display:inline 说：“嘿，把这个元素当作一段文本对待，就像一个 em、span 或 a 元素一样。”您不能指定内联元素的宽度；它占用的空间与其中的文本一样多，这就是为什么它不适用于您的ul。 99% 的情况下，您只想在实际文本上使用 display:inline。您可能不希望在 ul 上使用它，因为 ul 是文本的容器，实际上并不是文本本身。

display:block 使元素扩展以填满其容器的宽度，除非您指定 width。因此，如果您将display:block 放在您的ul 上，它将扩展以填充您的nav 元素的宽度。

display:flex 是一个相当新的功能，与display:block 具有相同的行为，但还有许多其他您当前未使用的很酷的东西，例如使元素内的所有内容扩展以填充可用空间。

display:inline-block 就像 display:inline 元素“流动”在它们周围的文本，和 display:block 一样你可以指定元素的宽度。

如果这是 5 年前，在大多数 Web 浏览器支持 display:flex 之前，您可能希望在 ul 上使用 display:block，在 li 上使用 display:inline-block。但是今天，display:flex 是导航栏的绝佳选择。

【讨论】：