Question

我试图制作一个包含水平导航栏的流畅的响应式网页，我的问题是，在浏览器窗口的某个宽度处，栏的元素开始重新定位一个在彼此顶部，是否有任何方法可以避免这种情况行为，以使导航栏只是伸展到某个媒体查询断点。我需要网站在查询未激活的范围内看起来最不体面。

以下是目前的情况： http://wearehellyeah.com/test/home_formacio.html

<div class="barra">
            <!--Menu Principal-->
            <nav class="menu-principal">
                <ul class="menu">
                    <li class="item sub"><button type="button" id="menu-lateral" class="sb-toggle-left"><img src="img/iconos/menu.png" alt="search"></button></li>
                    <li class="item"><a href="#">Actualitat</a></li>
                    <li class="item"><a href="#">Activitat de l'oficina</a></li>
                    <li class="item"><a href="#">Vocalies</a></li>
                    <li class="item"><a href="#">Formació</a></li>
                    <li class="item"><a href="#">Serveis</a></li>
                    <li class="item"><a href="#">Actualitat</a></li>
                    <li class="item no-border"><a href="#" class="no-border">El Col-legi</a></li>
                    <li class="item home"><a href="#" class="no-border">Marcar com pàgina d'inici</a></li>
                    <li class="item conectados">Conectados 103</li>
                    <li class="item"><button type="button" id="search"><img src="img/iconos/search.png"></button></li>
                </ul>
            </nav>
            <!--Fin Menu Principal-->
            <!--Input buscador-->
            <div class="buscador">
                <form action="">
                    <input type="text" id="ip-search">
                </form>
            </div>
            <!--Fin de Input Buscador-->
</div>

CSS：

.barra {
background: #00b1da;
width: 100%;
padding: 0;
}

.menu-principal {
height: 36px;
line-height: 35px;
margin: 0 auto;
max-width: 1024px;
position: relative;
width: 100%;
}

.menu {
padding: 0;
margin: 0;
}

.menu .item {
float: left;
list-style: none;
}

.menu .item a {
border-right: 1px solid #008ba9;
color: #fff;
font-size: 13px;
padding: 0 .98em;
text-decoration: none;
white-space: nowrap;
}

.menu .sub {
background: #008ba9;
padding: 0 .4em;
height: 35px;
display: block;
}

.conectados {
background: #fff;
color: #4b585b;
font-size: 13px;
padding: .1em 1em 0 2.3em;
position: relative;
}

.menu .home {
background: url("../img/iconos/home.png") no-repeat 2% #00a9a1;
border-left: 1px solid #40c2d3;
padding: 0 0 0 1em;
}

Answer 1

您可以添加最小宽度：

.menu-principal {
    min-width:883px;
}

然后它不会相互重叠。但是，导航栏上的选项太多，您可能希望在进入移动媒体查询范围时将其设置为下拉框。例如http://vagish.com（当您将浏览器宽度设置得更小时，它会更改导航栏）

您可以在768px和880px之间进行媒体查询，并减少菜单项之间的间距，这应该能够让它看起来很好，直到您点击768px媒体查询。

这可行（连同上面的CSS）：

@media all and (max-width: 768px) and (min-width: 880px) {
    .menu-principal {
        padding:0px;
    }
    .menu-med .item a {
        padding:0 .69em;
    }
}

流体水平NavBar用于响应式网站

1 个答案: