【问题标题】:Putting links next to each other - CSS mobile styles将链接彼此相邻放置 - CSS 移动样式
【发布时间】:2017-09-14 23:37:37
【问题描述】:

我的链接在我的默认 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/

【问题讨论】:

    标签: css wordpress media-queries


    【解决方案1】:

    您的headernav元素包含(在不同的规则中)widthmax-width 定义最大宽度为 150 像素,宽度为 160/360 像素,这会阻止您的菜单变宽。

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

    【讨论】:

      【解决方案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;
      }
      

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

      【讨论】:

      • 哈哈,那些cmets。您是否将 display: none 设置为 'sidebaar' 元素?感谢您的帮助
      • @maria 不,我将#sidebar 设置为display: none;。我不确定为什么 WordPress 会在移动设备上复制您的主菜单。您也许可以在配置中修复它,而不是使用display: none。希望这会有所帮助!
      猜你喜欢
      • 2021-07-05
      • 1970-01-01
      • 2015-01-03
      • 1970-01-01
      • 1970-01-01
      • 2022-01-20
      • 2010-12-09
      • 2020-07-22
      • 2017-05-08
      相关资源
      最近更新 更多