我是HTML和CSS的新手。我有一个导航栏，我想要（徽标和链接）对齐到页面侧边栏上方。它在不同屏幕上的不同位置（以及调整浏览器的大小时），我不知道如何解决。我做了一件小提琴，我将链接到该网站，以便您了解我的意思。这是小提琴： 小提琴
这是页面： 页面
#header {
width: 100%;
height: 91px;
margin: 0;
top: 0;
}
#menu {
float: right;
width: 100%;
height: 54px;
margin-top: 0;
background: #ffffff url(http://i1378.photobucket.com/albums/ah105/WinPhanNick/menu_bar_zps6212d723.jpg) repeat-x left top;
position: fixed;
}
#menu ul {
margin: 0;
padding: 0px 0 0;
list-style: none;
line-height: normal;
margin-left: 28%;
}
#menu li {
display: inline;
text-align: center;
}
#menu a {
display: block;
float: left;
height: 36px;
padding: 18px 20px 0px 20px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
li#logo {
height: 52px;
width: 52px;
background: url(http://i1378.photobucket.com/albums/ah105/WinPhanNick/cb_logo_zpsd1b14443.png) no-repeat;
margin-top: 1px;
margin-right: 1px;
margin-left: 1px;
}
#menu a:hover,
#menu .active a {
background: #1687ef;
color: #FFFFFF;
}
#logo {
float: left;
width: 270px;
height: 76px;
margin: 0px;
padding: 15px 0px 0px;
margin-left: 27%;
}
使链接包装程序（即ul）与页面容器（即）具有相同的宽度892px，并将其设置margin: auto为居中。您也可以删除margin-left: 28%。不用了 您还遇到了浮动问题，因此ul崩溃了。您需要清除浮动元素。您可以添加overflow:hidden。
#menu ul{
overflow: hidden; //clear float issue
width: 892px; // same width as #page
margin: 0 auto; //will center
padding: 0px 30px; //add to keep the same padding as #page-bgtop
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句