我的菜单与浏览器窗口对齐,而不是与内容对齐
我正在使用 WordPress 创建一个网站。 (可以在这里看到:http://www.adp-design-demos.com/brolim2 /)但是,菜单与浏览器的侧面对齐,而不是与我的 WordPress 网站的内容对齐。我已经浏览过CSS,并且知道菜单CSS在哪里,但目前我所能做的就是按百分比移动它。
任何人都可以帮助我进行编码,以便无论窗口/浏览器大小和位置如何,菜单都会显示在固定位置。
干杯
我一直在编辑的区域:
#header .nav {
background: #E0DCD9 url('images/bg_nav.png') repeat-x;
overflow: hidden;
}
#header .nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#header .nav li {
float: left;
}
#header .nav li a {
display: block;
padding: 12px 18px 13px 18px;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
}
#header .nav li ul {
margin: 0;
padding: 0;
position: absolute;
margin-top: 26px;
}
#header .nav li li a {
font-size: 11px;
padding: 0;
margin: 0 0 0 20px;
}
#header .nav li li {
width: auto;
display: inline;
float: none;
}
#header .nav li li a:hover {
background: none;
}
#header .nav li a:hover, #header .nav .current_page_item a {
background: #4B3F33;
color: #fff;
}
#header .nav li ul {
display: none;
}
#header .nav .current_page_item ul {
display: block;
position: absolute;
left: 652px;
}
#header .nav .current_page_item ul li a {
background: none;
color: #666;
}
.nav_categories {
background: #f58220;
background-position: top center;
overflow: hidden;
}
.nav_categories ul {
width: 1000px;
margin: 0 auto 0 auto;
}
.nav_categories a {
display: block;
padding: 15px;
align: center;
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
}
.nav_categories li {
float:right;
position:relative;
left:-42%;
text-align:left;
}
.nav_categories .current-cat a, .nav_categories a:hover {
color: #4b3f33;
}
I am in the process of creating a site using wordpress. (It can be seen here: http://www.adp-design-demos.com/brolim2/) However, the menu aligns with the side of the browser, rather than the content of my wordpress site. I have been through the CSS, and know where the menu CSS is, but at the moment all I've managed to do is move it by percentage.
Can anyone help me with the coding so that the menu appears in a fixed position regardless of window/browser size and location.
Cheers
The area I have been editing:
#header .nav {
background: #E0DCD9 url('images/bg_nav.png') repeat-x;
overflow: hidden;
}
#header .nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#header .nav li {
float: left;
}
#header .nav li a {
display: block;
padding: 12px 18px 13px 18px;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
}
#header .nav li ul {
margin: 0;
padding: 0;
position: absolute;
margin-top: 26px;
}
#header .nav li li a {
font-size: 11px;
padding: 0;
margin: 0 0 0 20px;
}
#header .nav li li {
width: auto;
display: inline;
float: none;
}
#header .nav li li a:hover {
background: none;
}
#header .nav li a:hover, #header .nav .current_page_item a {
background: #4B3F33;
color: #fff;
}
#header .nav li ul {
display: none;
}
#header .nav .current_page_item ul {
display: block;
position: absolute;
left: 652px;
}
#header .nav .current_page_item ul li a {
background: none;
color: #666;
}
.nav_categories {
background: #f58220;
background-position: top center;
overflow: hidden;
}
.nav_categories ul {
width: 1000px;
margin: 0 auto 0 auto;
}
.nav_categories a {
display: block;
padding: 15px;
align: center;
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
}
.nav_categories li {
float:right;
position:relative;
left:-42%;
text-align:left;
}
.nav_categories .current-cat a, .nav_categories a:hover {
color: #4b3f33;
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
乍一看,导航的对齐方式看起来是正确的(即使在调整大小之后)。我查看了演示站点并检查了 html。我在 #header 中找不到 .nav。你能给我提供你正在使用的html吗?
At first glance the alignment of your navigation looks correct (even after resizing). I looked at the demo site and inspected the html as well. I couldn't find .nav within #header. Can you provide me with the html you're working with?