将链接彼此相邻放置 - CSS 移动样式

Question

我的链接在我的默认 CSS 中垂直堆叠，但我试图将导航推到页面顶部并在移动设备中水平设置它们。似乎无法实现。 该网站使用 WordPress，因此很难确定元素的名称。

#sidebaar a, #sidebaar li {
text-align:right;
clear:both;

}

#sidebaar{
width:150px;
text-align, right;
align-content:right;
display:inline-block;
width:100%;

}

在媒体样式中：

 #sidebaar a, #sidebaar ul li, #sidebaar ul li a{
display:inline;
clear:none;

} #sidebaar{
    width:100%;
}

我的网站可以在这里查看 - http://www.ubart320.org/students/mariaroo/gallery/

Answer 1

您的header 和nav元素包含（在不同的规则中）width 和max-width 定义最大宽度为 150 像素，宽度为 160/360 像素，这会阻止您的菜单变宽。

您必须为两者定义width: 100%; 和max-width: none;，如有必要，添加!important to those values

Answer 2

您正在编写一些时髦的代码。出于某种原因，您在移动设备上显示了两个菜单。但是，我将第二个菜单设置为 display: none; 并应用这些样式以获得可接受的结果（将此应用于您的移动样式）：

nav{
  width: 100%;
  max-width: none;
}
ul#menu-menu-2{
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
#menu-menu-2 li{
  margin: 0 2.5px;
}

请参阅下面的最终结果。看起来您在照片网格上还有一些工作要做，但水平导航是可以接受的。如果您有任何其他问题，请告诉我！