如何将响应式导航栏居中 [英] how to center responsive navigation bar

问题描述

我无法让这个导航栏居中.请帮忙.

这是我的 html:

<ul id="菜单"><li><a href="home.html">首页</a></li><li><a href="latestnews.html">最新消息</a></li><li><a href="resultsevents.html">结果&事件</a></li><li><a href="fundrising.html">筹款</a></li><li><a href="gallery.html">画廊</a></li>

这是我的css:

#nav {边距:0px 自动；}ul{显示:内联块；列表样式类型:无；保证金:0 自动；填充:0;位置:绝对；}李{显示:内联；向左飘浮;右边距:1px；}李阿{显示:内联块；最小宽度:140px；高度:50px；文本对齐:居中；行高:50px；字体家族:Century Gothic、Candara、Tahoma、sans-serif；颜色:#fff;背景:#2f3036；文字装饰:无；}li:悬停一个{背景:#659d32；}li:hover ul a {背景:#f3f3f3；颜色:#2f3036；高度:40px；行高:40px；}li:hover ul a:hover {背景:#659d32；颜色:#fff;}律{显示:无；}小李{显示:块；浮动:无；}li ul li a {宽度:自动；最小宽度:100px；填充:0 20px；}ul li a:hover + .hidden, .hidden:hover {显示:块；}.显示菜单{字体家族:Century Gothic、Candara、Tahoma、sans-serif；文字装饰:无；颜色:#fff;背景:#659d32；文本对齐:居中；填充:10px 0;显示:无；}输入[类型=复选框]{显示:无；}输入[类型=复选框]:选中~#menu{显示:块；}@media 屏幕和 (max-width : 760px){ul{位置:静态；显示:无；}李{底边距:1px；}ul li, li a {宽度:100%；}.显示菜单{显示:块；}}

我尝试在整个事物周围添加一个 div 并将边距设置为 auto ，但没有奏效.我不知道该怎么办.

解决方案

首先，你的目标是 #nav 而它是 .nav 根据你的 html.

然后你需要为你的导航父级设置一个宽度，以便有一个居中的位置.

工作示例

.nav {边距:0px 自动；宽度:705px；}

编辑:由于您的列表项和链接没有响应，因此向父导航添加百分比是没有意义的.

你可以使用这样的东西来获得以响应为中心的导航:

.nav {边距:0px 自动；宽度:90%；}ul{列表样式类型:无；填充:0;}李{向左飘浮;宽度:18%；}李阿{宽度:100%；}

i cant get this navigation bar to center. Please help.

Here is my html:

<div class="nav">
            <ul id="menu">
                <li><a href="home.html">Home</a></li>
                <li><a href="latestnews.html">Latest News</a></li>
                <li><a href="resultsevents.html">Results & Events</a></li>
                <li><a href="fundraising.html">Fundraising</a></li>
                <li><a href="gallery.html">Gallery</a></li>
            </ul>
</div> 

Here is my css:

#nav {
margin:0px auto; }

ul {
display: inline-block;
list-style-type:none;
margin:0 auto;
padding:0;
position: absolute; }

li {
display:inline;
float: left;
margin-right: 1px; }

li a {
display:inline-block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: Century Gothic, Candara, Tahoma, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none; }

li:hover a {
background: #659d32; }

li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px; }

li:hover ul a:hover {
background: #659d32;
color: #fff; }

li ul {
display: none; }

li ul li {
display: block;
float: none; }

li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px; }

ul li a:hover + .hidden, .hidden:hover {
display: block; }

.show-menu {
font-family: Century Gothic, Candara, Tahoma, sans-serif;
text-decoration: none;
color: #fff;
background: #659d32;
text-align: center;
padding: 10px 0;
display: none; }

input[type=checkbox]{
display: none; }

input[type=checkbox]:checked ~ #menu{
display: block; }

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

ul {
    position: static;
    display: none;
}

li {
    margin-bottom: 1px;
}

ul li, li a {
    width: 100%;
}

.show-menu {
    display:block;
}
}

I tried adding a div around the whole thing and setting margin to auto but that hasnt worked. Im not sure what to do.

解决方案

Firstly you're targeting #nav while it's .nav according to your html.

Then you need to set a width to your nav parent in order to have a centered position.

Working example

.nav {
    margin:0px auto;
    width:705px;
}

Edit: Since your list items and links aren't responsive, it doesn't make sense to add a percentage to the parent nav.

You can use something like this to have a responsive centered navigation:

.nav {
    margin:0px auto;
    width:90%;
}
ul {
    list-style-type:none;
    padding:0;
}
li {
    float: left;
    width:18%;
}
li a {
    width:100%;
}

这篇关于如何将响应式导航栏居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！