菜单项之间的空格

请看这个小提琴：http://jsfiddle.net/LAzbe/
这些空间从哪里来？菜单项之间的空格

HTML：

<header> 
    <ul> 
     <li class="active"><a href="#">Menu 1</a></li> 
     <li class="active"><a href="#">Menu 2</a></li> 
     <li><a href="#">Menu 3</a> 
      <ul> 
       <li><a href="#">Sub 1</a></li> 
       <li><a href="#">Sub 2</a></li> 
       <li><a href="#">Sub 3</a> 
        <ul> 
         <li><a href="#">Sub-sub 1</a></li> 
         <li><a href="#">Sub-sub 2</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Sub 4</a></li> 
      </ul> 
     </li> 
     <li class="active"><a href="#">Menu 4</a></li> 
     <li><a href="#">Menu 5</a></li> 
     <li><a href="#">Menu 6</a></li> 
    </ul> 
</header>

CSS：

body { 
    margin: 0; 
    font-size: 15px; 
    line-height: 25px; 
    font-family: Helvetica, Arial, sans-serif; 
} 

ul, ol { 
    margin: 0; 
    padding: 0; 
} 

header { 
    height: 86px; 
} 
header ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    display: block; 
} 
header > ul > li { 
    display: inline-block; 
    position: relative; 
} 
header > ul > li a { 
    display: block; 
    line-height: 83px; 
    padding-left: 18px; 
    padding-right: 18px; 
    text-decoration: none; 
    color: #888888; 
    background-color: white; 
} 
header > ul > li:hover > a, header > ul > li.active > a { 
    background-color: #f9f9f9; 
    color: #888888; 
    text-decoration: none; 
    border-bottom: 3px #ec5d9d solid; 
} 

header > ul > li ul { 
    display: none; 
}

来源

2014-05-18 Lari13

添加保证金右：-4px;到标题> ul> li –

这是一个黑客:)但为什么有这些利润率？ – Lari13

这是由于内嵌块。这些天来这是一种合适的技术。 –

如果你正在谈论li元素之间的狭窄的空间，然后否定保证金。

header > ul > li { 
    display: inline-block; 
    position: relative; 
    margin-right:-4px; 
}

它发生是因为inline-block。 Chris Coyer在这个too上有一些东西。

对于IE 6-7来说，负边缘并不是一个好主意，但是谁也在乎。

其他技术也是有效的，他们的工作。

来源

2014-05-18 06:56:07

感谢Chris Coyer的链接。 – Lari13

不客气。 –

负边距不是一个好主意。因为最后你会对此漠不关心。

将li设置为显示：block而不是inline-block，然后使用float：left;

e.g：

header > ul > li { 
    display: block; 
    position: relative; 
    float:left 
}

更新小提琴：http://jsfiddle.net/LAzbe/1/

来源

2014-05-18 06:56:53

我一直在使用它们，从来没有一个负边缘问题。 –

如果您从每个菜单项的右侧取4px。在这种情况下，它将意味着在最右边将是一个20px的差距（在6个菜单项后）这取决于您想要做什么，没有任何负边距问题，他们有自己的位置。 –

使用本

header > ul > li { 
    float:left; 
    position: relative; 
}

来源

2014-05-18 06:58:00 user3091574

菜单项之间的空格

回答

相关问题