Question

我目前是一名学习HTML和CSS成为网络开发人员的学生，在调整页面窗口大小时，我的导航按钮无法正确显示时遇到了一些麻烦。我希望它们像块一样彼此堆叠，但是如您所见，它们重叠。 Webpage Example

我确定我缺少明显的东西，但我将非常感谢您的帮助。谢谢！

body {font-family: verdana, arial, sans-serif;
      background-color: #523925; }

header { text-align: center;
         padding-top: 50px;
         background-image: url(coffeemug.jpg);
         height: 120px;
         font-size: 400%;
         font-family: verdana pro black;
         font-weight: bold; }

nav { text-align: center;
      margin-top: 20px;
      max-height: 150px; }

nav a { text-align: center;
        padding: 10px 70px;
        border-style: solid; border-width: 4px; border-color: #16181D;
        margin-left: 5px;
        color:#523925;
        font-size: 120%; }

footer { text-align: center; 
         margin-top: 20px;
         font-size: small; }


#wrapper { width: 95%;
           margin-left: auto;
           margin-right: auto;
           background-color: #EAB987; }

.charpic {max-width: 100%; }

@media only screen and (max-width: 1024px) {

nav a { font-size: 100%;
        padding: 8px 50px; }
}

Answer 1

尝试添加显示：块；到a元素，就像这样：

nav a { text-align: center;
    padding: 10px 70px;
    border-style: solid; border-width: 4px; border-color: #16181D;
    margin-left: 5px;
    color:#523925;
display: block;
    font-size: 120%; }

Answer 2

默认情况下，a标记具有display: inline，这使得它们可以并排显示并适合作为终端，而不会很好地遵守边距。如上一个答案所述，将它们更改为display: block将使它们尊重边距，但除非添加其他逻辑，否则它们不能并排放置。

要获得我想要的行为，最简单的更改可能就是使它们display: inline-block，使其继续并排放置，但将其视为块元素在结束包装时不会重叠。看起来像：

nav a { 
    text-align: center;
    padding: 10px 70px;
    border-style: solid; border-width: 4px; border-color: #16181D;
    margin-left: 5px;
    color:#523925;
    display: inline-block;
    font-size: 120%; 
}

您也可以使用flexbox，使用nav使display: flex成为flex父级，然后使用flex属性确定布局。这将是更多的更改，但我认为可能会为您提供更好的解决方案。例如，如果您想让它们在必要时溢出并在每行居中，则可以执行以下操作：

nav {
  display: flex;
  justify-content: center;
}

在页面调整大小时堆叠导航按钮

2 个答案: