Question

所以我希望我的导航栏有3个链接，每个链接都在左边，中间和右边（http://lawthatworks.com/site/）所以我决定用浮动来定位每个链接。我的问题是，当我的网站在手机或平板电脑上观看时，响应式菜单因浮动标记而无法正常显示。我该如何解决这个问题？

Answer 1

移动整个部分

#menu-item-12{
    float:left;
}
#menu-item-11{
    float:right;
}
#menu-item-13{
    float:center;
}

使用现有断点(min-width: 850px)进入媒体查询这意味着如果屏幕大于850px宽，它将浮动，否则它将不会

@media screen and ( min-width: 850px ) {
    #menu-item-12 {
        float: left;
    }
    #menu-item-11 {
        float: right;
    }
    #menu-item-13 {
        float: center;
    }
}

但是the use of floats in layout is discouraged。我建议使用the flexible box model layout。将父级设置为display: flex和justify-content: space-between;这将对齐所有彼此等距离的项目。

@media screen and ( min-width: 850px ) {
    #menu-home-menu {
        display: flex;
        justify-content: space-between;
    }
}

虽然这两种方法在大多数现代浏览器中都会显示相同的内容，但它们都是错误的。远离它们通常是一个好主意，除非你正在做一些事情，比如在一个段落中添加一个图像并让文本“漂浮”在图像周围。

如何使用@media覆盖浮动？

1 个答案: