中心水平块元素,具有动态宽度 - 仅CSS跨浏览器

Question

这是一个古老的话题,但我发誓它证明比它应该更难.

我创建了一个jsfiddle来显示问题.http://jsfiddle.net/motocomdigital/VfDfw/1/

我以为我破解了它,但它在IE 8兼容模式下失败了.

问题

我有一个语义无序列表中的导航菜单.包含的div包装器具有固定的宽度,这是网站的主要宽度.

无序列表需要在包装器中浮动.但导航中的所有块元素都没有设置宽度.

http://jsfiddle.net/motocomdigital/VfDfw/1/

我为每个元素着色了不同的背景颜色,以便您可以看到每个元素.

我以为我找到了一个修复购买,在div.nav上有一半的包装宽度作为左侧位置,然后在.nav ul上保留-50%保证金- 但似乎在IE 8兼容模式下失败,请参阅下面的小提琴...

http://jsfiddle.net/motocomdigital/VfDfw/2/

任何人都可以建议一个解决方案或更有效的CSS方法.它是烤我的面条.

谢谢

---

更新

我想我应该更新我的问题,为什么我在我的小提琴例子中使用每个div.

看到我的新小提琴.http://jsfiddle.net/motocomdigital/VfDfw/3/

我现在已经为每个元素添加了10px的顶部位置,因此您可以看到为什么我使用了这么多div的目的.但唯一的问题是这个解决方案不是IE 7友好的.所以我需要另一种居中块元素的解决方案.我希望有一个浮动:中心 CSS规则!

1. 深蓝色div是我的地平线100%宽度div为我的导航无限背景图像.
2. 红色div是包装器,它是我网站的最大宽度.小提琴宽度:420px.
3. 绿色div是我的动态导航的浮动宽度,位于左侧:210px(高于宽度的50%)
4. 将黄色UL是我的动态导航栏的浮动宽度里的元素,以50%的负余量
5. 蓝色李是我的锚按钮容器与分隔器.

我希望这是有道理的.但是这个解决方案几乎可以工作,但是它不能用于IE7

Answer 1

使用带有文本对齐中心的显示块和内联块可以帮助您。它曾经可以在非常旧的浏览器中运行。将包装器、nav、ul 中的块更改为内联块，使它们变为全宽或“收缩”并居中。（无法检查旧版 IE 中的小提琴，但“应该”有效）

当您将文本放在 div 中居中并且文本不是真正的文本，而是内联块时，它们的行为就像它们所在的“单词”一样，使内容成为居中的元素列表，而不需要任何固定宽度。

body {
    font-family: Helvetica, Arial, Geneva, sans-serif;
}

#horizon {
    height: 49px;
    width: 100%;
    overflow: visable;
    position: relative;
    background: url(images/nav-bg.jpg) no-repeat center top #041e75;
    top: 100px;
}

#wrapper {
    max-width: 420px;
    margin:  0 auto;
    height: 49px;
    overflow: visible;
    background: red;
    padding:10px;
    text-align:center;
}

.nav {
    display:block;
    height: 49px;
    background: green;
    padding:5px;
    text-align:center;
}

.nav a {
    color: #ffffff;
}

.nav ul {
    background: yellow;
    padding:5px;
    display:block;
    text-align:center;
}

.nav ul li {
    display: inline-block;
    background: blue;
    overflow: visible;
}

.nav ul li a {
    display: block;
    height: 49px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.50);
    padding-right: 10px;
    padding-left: 10px;
}

.nav ul li a:hover {
    text-decoration: none;
    background-color: rgb(6, 29, 93 );
    background-color: rgba(13, 43, 119, 0.95);
}

<div id="horizon">
    
    <div id="wrapper">
    
        <div class="nav">                
        
            <ul>
        
                <li><a href="#" title="home">Home</a></li>
                <li><a href="#" title="about">About</a></li>
                <li><a href="#" title="menu">Menu</a></li>
                <li><a href="#" title="map">Map</a></li>
                <li><a href="#" title="contact">Contact</a></li>
        
            </ul>
    
        </div>
        
    </div>
    
</div>