Question

所以，我能够以一种方式获得横向导航条而不是另一种方式，我对此感到困惑。当我使用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，它只会影响所有三个链接处的填充，而不是在它们之间填充。

Answer 1

display:inline说，＆＃34;嘿，将此元素视为一段文字，如em，span或a元素＆＃34;您无法指定内联元素的宽度;它只占用了里面文本的空间，这就是为什么它不适用于你的ul。 99％的情况下，您只想在实际文本中使用display:inline。您可能不希望在ul上使用它，因为ul是文本的容器，并且实际上并非文本本身。

除非您指定display:block，否则

width会使元素展开以填充其容器的宽度。因此，如果您将display:block放在ul上，它会展开以填充nav元素的宽度。

display:flex是一个相当新的功能，与display:block具有相同的行为，但是当时还有很多其他很酷的东西，你当前没有使用它，比如让元素内的所有东西都扩展填补可用空间。

display:inline-block就像display:inline中的元素＆＃34; flow＆＃34;用它们周围的文字，和display:block一样，你可以指定元素的宽度。

如果这是5年前，在大多数网络浏览器支持display:flex之前，您可能需要display:block上的ul和display:inline-block li 1}}。但今天，display:flex是导航栏的绝佳选择。

显示：内联不工作但显示：flex确实

1 个答案: