Question

我正在学习如何根据这里的教程制作响应式网站http://www.hongkiat.com/blog/responsive-web-nav/

我遇到了问题：我无法在NAV＆amp;仍然保持在屏幕上的UL中心。出于某种原因，即使

ul{display:inline-block;}

和

nav{text-align:center;}

链接#pull将UL推向左侧，不再使其居中。我想在NAV中将一个登录表格浮动到NAV的右边，其中#pull现在就在我的生活中我不知道如何在保持UL完全居中于屏幕的同时做到这一点，无论如何在UL的右边似乎推动了UL，即使它应该始终居中。

我确定它只是一个基本的CSS定位问题，我无法弄清楚，因为我是新手，但我只需要更多的内容，我无法弄清楚如何。

的jsfiddle

Answer 1

一种简单的方法是使用position css属性将“菜单”按钮放在UL上。确保使用position:relative属性设置nav标记，然后按菜单按钮并设置以下内容：

position:absolute;
top:0;
right:0;

这应该使菜单按钮保持在右上角，特别是在响应式网页设计的情况下。

查看小提琴：http://jsfiddle.net/p3tK5/

Answer 2

尝试添加

position:relative;
left: 8vw;

到您的nav ul。 See this了解有关vw和vh等的更多信息。

Answer 3

您在响应式设计中使用px而不是使用％

更新了CSS //％

中的所有宽度

nav{
    height:50px;
    width:100%;
}

nav ul{
    padding:0;
    margin: 0 auto;     /*No Y-axis margin, Only an Auto X-axis margin, making the ul centered*/
    width:80%;  
}

nav li{
    list-style:none; /*display:inline; also gets rid of the list styles*/ 
    float:left;      /*Floating the menu list items to the left so they will be
                  displayed horizontally side by side, but floating an element
                      will also cause their parent to collapse*/
    dislay: inline-block;
    min-width: 23%;
}

#navaside {
    height:50px;
    width:15%;                          /* Takes up 100% of the parent's width, 
}

#navaside a#pull{

    color:#fff;                 /* Color of the link */
    display:inline-block;       /* display:block (also)--Allows the width and line height to actually take affect */
    width:100%;                /* 5 elements at 140px = 700px, the width of the 
}

检查http://jsfiddle.net/raunakkathuria/aF3Pd/7/

你可以根据你的要求设置一个或者一个样式，我刚刚修改了一些css以使其响应

Answer 4

只需在您的UL上添加display:table; margin: 0 auto。

CSS导航栏UL不居中

4 个答案: