6

这是一个古老的话题，但我发誓它被证明比它应该的更困难。

我创建了一个 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 不友好。所以我需要另一种居中块元素的解决方案。我希望有一个float: center CSS 规则！

在此处输入图像描述

  1. 深蓝色div是我的导航无限背景图像的地平线 100% 宽度 div。
  2. 红色div是包装器，它是我网站的最大宽度。小提琴宽度：420px。
  3. 绿色div是我的动态导航的浮动宽度，位于左侧：210px（以上宽度的 50%）
  4. 黄色的ul是我的动态导航li元素的浮动宽度，负边距为 50%
  5. 蓝色的li是我的带有分隔线的锚按钮容器。

我希望这是有道理的。但是这个解决方案几乎奏效了，可惜它在 IE7 中不起作用

4

3 回答 3

0

使用带有文本对齐中心的显示块和内联块可以帮助您。它曾经在非常旧的浏览器中工作。在包装器、nav、ul 中将块更改为 inline-block 以使它们全宽或“收缩”并居中。（无法检查旧 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>

于 2018-01-10T09:38:23.597 回答
0

嗨，您可能想尝试使用“适合内容宽度”的“margin 0 auto”技术，如下所示：

.nav { 
      overflow: visible; 
      height: 49px; 
      position: relative; 
      background: green; 
}

.nav ul {
    height: 49px;
    display: block;
    text-align: center;
    border-right: 1px white solid;
    margin-left: -50%;
    top: 10px;
    overflow: visible;
    background: yellow;
    display: block; 
    margin: 0 auto; 
    width: fit-content; 
}

希望这有效。

于 2021-01-15T12:22:25.320 回答
0

嗨，我认为我尝试使用 flex 的方式，flex display 是最好的方法，我在如何使用它的行中解释了它。

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

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

#wrapper {
    width: 420px;
    margin:  0 auto;
    height: 49px;
    overflow: visible;
    background: red;    
    width: 100%;

}

.nav {
    overflow: visible;
    height: 49px;
    float: left;
    left: 210px;
    background: green;
    width: 100%;
}
.nav ul{
  /* useflex to make them to be as a row */
  display: flex;
  /* remove the points from the ul */
  list-style: none;
  /* use this to chose how to spreate the content */
  justify-content: space-between;
  justify-content: space-around;
  justify-content: space-evenly;
}

a {
  /* remove text dec for the li */
  text-decoration: none;
  color: black;
}
于 2020-02-06T21:57:28.540 回答