水平居中导航问题/徽标
我在尝试布置我的标题(徽标和导航),以便徽标位于页面的中心。现在,如果左侧和右侧导航宽度相同,一切正常。但是我希望徽标位于页面的中心位置,而不管导航元素的宽度。我现在不担心垂直线,只是水平线。水平居中导航问题/徽标
- 标志必须水平居中(相对于浏览器窗口)
- 需要有标志的左和右导航元素
- 各元素的导航元素和宽度的数量可以变化(左侧和右侧将最有可能在宽度上不同)
- 我想报头是100%的宽度(浏览器窗口的宽度)
- 的HTML和CSS完全可以从我列出 改变
- 仅将JavaScript用于CSS选择器/属性回退(即迪安爱德华兹IE7),HTML5支持(即垫片/ v)的等
示例代码
标志/导航实体模型(没有什么是按比例)
HTML
<header>
<nav class="nav1">
<ul>
<li><a href="http://example.com">Hello World</a></li>
<li><a href="http://example.com">Hello World</a></li>
<li><a href="http://example.com">Hello World</a></li>
<li><a href="">Hello</a></li>
</ul>
</nav>
<img src="http://markschamel.com/upload/blue.square.png" />
<nav class="nav2">
<ul>
<li><a href="">Hello World</a></li>
<li><a href="http://example.com">Hello</a></li>
</ul>
</nav>
</header>
CSS
header {
width: 100%;
text-align: center;
}
nav.nav1 {
text-align: right;
display: inline-block;
}
nav.nav2 {
text-align: left;
display: inline-block;
}
nav ul {
overflow: hidden;
}
nav.nav1 li {
float: left;
}
nav.nav2 li {
float: left;
}
我解决了我自己的问题。用最小宽度的百分比来估计UL的宽度是一件小事。还有一些其他小的更新。
演示:http://jsfiddle.net/S2ySk/3/
HTML
<header>
<nav class="nav1">
<ul>
<li><a href="http://example.com">Hello World 1</a></li>
<li><a href="http://example.com">Hello World 2</a></li>
<li><a href="http://example.com">Hello World 3</a></li>
<li><a href="">Hello</a></li>
</ul>
</nav>
<img src="http://markschamel.com/upload/blue.square.png" />
<nav class="nav2">
<ul>
<li><a href="">Hello World</a></li>
<li><a href="http://example.com">Hello</a></li>
</ul>
</nav>
</header>
CSS
header {
width: 100%;
text-align: center;
background-color: #c87137;
white-space: nowrap;
}
nav {
min-width: 40%;
display: inline-block;
}
nav.nav1 {
text-align: right;
}
nav.nav2 {
text-align: left;
}
nav ul {
width: 100%;
white-space: nowrap;
overflow: hidden;
background-color: #ff0000;
}
nav li {
background-color: #008000;
white-space: nowrap;
}
nav.nav1 li {
float: right;
}
nav.nav2 li {
float: left;
}
我无法弄清楚CSS的问题,但耶,使用JavaScript,你可以实现它。
$(function() {
headerWidth = $('header').width();
imgWidth = $('img').width();
padding = 25; // This is the approx. padding the header tag takes
half = Math.round((headerWidth - imgWidth - padding)/2);
$('.nav1,.nav2').css('width', half + 'px');
});
演示:http://jsfiddle.net/S2ySk/2/
全屏:http://jsfiddle.net/S2ySk/2/embedded/result/
请注意,直到它不会工作,如果你调整浏览器,你必须调整之后再次刷新页面。可以使用浏览器窗口的.resize()
事件并在此时执行上述代码来完成。
OP(这就是我)说:“只对CSS选择器/属性回退(即Dean Edwards IE7)使用JavaScript,HTML5支持(即shim/v)等。”如果您要使用JS,那么确定两个导航中的哪一个更长,然后将最长的值应用于较短的值会更好吗?没有填充近似。 – w0lf42 2012-03-31 21:24:14
它仅适用,如果你复制链接并将其输入到浏览器...奇怪。 .. – roger 2012-03-31 19:14:08
这不起作用(是的,我在jsfiddle之外测试)。如果您将其中一个列表的时间长于另一个,则徽标不会保留在页面的中心。 http://jsfiddle.net/7rY6B/1/ – w0lf42 2012-03-31 19:56:43