Question

我正在尝试设置菜单样式。我有一个工作代码，但有人说父div比子div小。我很确定它不对，所以我尝试编辑它，但现在我有一个问题。看起来像： enter image description here

正如你可以看到菜单“FLASHOVKY”的最后一部分在另一行，并且所有li都是相同的宽度dispite，事实文本是不同的长度。

CSS：

#menu {
    background-image: url('images/menubg.png');
    background-repeat: repeat-x;
    height: 44px;
    width: 983px;
    font-family: Arial;
    margin-left: 22px;
}
#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
#menu ul li {
    color: #f7f7f7;
    height: 44px;
    display: inline-block;
    min-width: 100px;
}

#menu ul li a {
    background-image: url('images/menu_spacer.png');
    background-repeat: no-repeat;
    background-position: top right;
    color: #f7f7f7;
    float: left;
    padding: 14px 15px; /* Disadvantage: you will have to adjust this padding MANUALLY */
    text-decoration: none;
    text-align: center;
    min-width: 85px;
}
#menu ul li:last-child a {
    background: none;
}
#menu ul li a:after {
    background-image: url('images/sipka.png');
    content: '';
    width: 10px;
    height: 8px;
    margin-left: 8px;
    display: inline-block;
}

HTML：

 <nav id="menu">
      <ul>
        <li><a href="#">GAMESITES</a></li>
        <li><a href="#">HRY</a></li>
        <li><a href="#">SERVERY</a></li>
        <li><a href="#">CLANKY</a></li>
        <li><a href="#">FORUM</a></li>
        <li><a href="#">DOWNLOADS</a></li>
        <li><a href="#">BLOGY</a></li>
        <li><a href="#">FLASHOVKY</a></li>                                                
      </ul> 
  </nav>

有人可以帮助我吗？附：现场演示：http://funedit.com/andurit/try11/

Answer 1

1] 您可以通过设置box-sizing:border-box;来解决此问题。问题是<a>标记上的填充，导致内容溢出，因为填充和边框位于内容框之外。

2] 要解决间距问题，您需要向float: left;添加#menu ul li。这样做的原因是嵌套在<a>中的#menu ul li标记向左浮动。这就是链接被抵消的原因。

更改此内容：

#menu ul li {
    color: #f7f7f7;
    height: 44px;
    display: inline-block;
    min-width: 100px;
}

#menu ul li a {
    background-image: url('images/menu_spacer.png');
    background-repeat: no-repeat;
    background-position: top right;
    color: #f7f7f7;
    float: left;
    padding: 14px 15px; /* Disadvantage: you will have to adjust this padding MANUALLY */
    text-decoration: none;
    text-align: center;
    min-width: 85px;
}

对此：

#menu ul li {
    color: #f7f7f7;
    height: 44px;
    display: inline-block;
    min-width: 100px;
    float:left; /* Add this float to remove extra space */
}

#menu ul li a {
    -webkit-box-sizing: border-box; /* Safari, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */

    background-image: url('images/menu_spacer.png');
    background-repeat: no-repeat;
    background-position: top right;
    color: #f7f7f7;
    float: left;
    padding: 14px 15px; /* Disadvantage: you will have to adjust this padding MANUALLY */
    text-decoration: none;
    text-align: center;
    min-width: 85px;
}

Answer 2

尝试使用css中的最小宽度值。

Answer 3

#menu {
    background-image: url('images/menubg.png');
    background-repeat: repeat-x;
    height: 44px;
    width: 983px;
    font-family: Arial;
    margin-left: 22px;
}
#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
#menu ul li {
    color: #f7f7f7;
    height: 44px;
    display: inline-block;
    min-width: 100px;          // this property causing you to make all box of same size and it occupie the 100px wether text is small or large
}

#menu ul li a {
    background-image: url('images/menu_spacer.png');
    background-repeat: no-repeat;
    background-position: top right;
    color: #f7f7f7;
    float: left;
    padding: 14px 15px; /* Disadvantage: you will have to adjust this padding MANUALLY */
    text-decoration: none;
    text-align: center;
    min-width: 85px;    // dont fix width 
}
#menu ul li:last-child a {
    background: none;
}
#menu ul li a:after {
    background-image: url('images/sipka.png');
    content: '';
    width: 10px;
    height: 8px;
    margin-left: 8px;
    display: inline-block;
}

Answer 4

使用float：left而不是display block ..如果你需要，只使用高度..内联和浮动：左边有不同用途..但你可能会喜欢..

#menu {
    background-image: url('images/menubg.png');
    background-repeat: repeat-x;
    height: 44px;
    width: 983px;
    font-family: Arial;
    border:1px solid;
    margin-left: 22px;
}
#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
    width:100%;
}
#menu ul li {
    color: #000;
    height: 44px;
    float:left;
    min-width: 100px;
}

#menu ul li a {
    background-image: url('images/menu_spacer.png');
    background-repeat: no-repeat;
    background-position: top right;
    color: #000;
    float: left;
    padding: 14px 15px; /* Disadvantage: you will have to adjust this padding MANUALLY */
    text-decoration: none;
    text-align: center;
    min-width: 85px;
}
#menu ul li:last-child a {
    background: none;
}
#menu ul li a:after {
    background-image: url('images/sipka.png');
    content: '';
    width: 10px;
    margin-left: 8px;
    display: block;
}

菜单 - 样式ul / li为宽度取决于文本长度

4 个答案: