7

在此页面上，我希望将导航右侧的整个空间填充为白色。

因此，我使用 :after CSS 选择器实现了 5px 宽的白色块，并希望有一种方法可以使其适合可用宽度，尽管我愿意接受其他建议！：

#menu-main-menu:after {
    content:"";
    display:block;
    background:#fff;
    width:5px;
    height:30px;
    float:right;
    }

这是简化的 HTML：

<div class="menu"><ul id="menu-main-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Courses &#038; prices</a></li>
<li><a href="#">Activities in Rio</a></li>
<li><a href="#">Accommodation</a></li>
<li><a href="#">News</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

以及所有相关的 CSS：

#primary-menu ul {
    overflow:hidden;
}
#primary-menu li {
    list-style:none;
    float:left;
}
#primary-menu a {
    color:#333;
    background: #fff;
    display:block;
}
#primary-menu .current-menu-item a, #primary-menu .current-page-parent a {
    color:#fff;
    background:none;
}
#menu-main-menu:before {
content:"";
display:block;
background:#fff;
width:20px;
height:30px;
float:left;
} 
#menu-main-menu:after {
content:"";
display:block;
background:#fff;
width:5px;
height:30px;
float:right;
}

感谢您花时间查看我的问题！

卡罗琳

4

3 回答 3

5

您可以将::after伪选择器添加到li.current-menu-item而不是#menu-main-menu从该元素开始添加白色背景。

.current-menu-item:after {
    background: none repeat scroll 0 0 #fff;
    content: "";
    height: 30px;
    position: absolute;
    right: -1000px;   /* these numbers are the same */
    top: 0;
    width: 1000px;    /* and need to be at least the width of the menu */
}

#primary-menu li {
    position: relative;  /* position the ::after element relative to the li */
}

#primary-menu ul {
    ....
    overflow: hidden;  /* you already have this to clear your floats */
    ....               /* but I thought I should emphasise that you need it */
}
于 2012-06-12T21:52:52.860 回答
1

下面的示例通过添加额外li的填充来工作，但由于字体将在浏览器中直接呈现，因此您无法预测宽度。此示例中的解决方法创建了一个容器 ( #cen) 用于使内容居中并设置宽度，该overflow属性也设置为隐藏。这样做，您可以添加比所需宽度大得多的div包装ul和填充物。li这不会导致任何问题，因为 parent.parent 隐藏了溢出。

http://jsfiddle.net/efortis/3YpDh/1/

<div id="cen">
  <div class="menu">
    <ul id="menu-main-menu">
       <li><a href="#">Home</a></li>
       <li><a href="#">About us</a></li>
       <li><a href="#">Courses &#038; prices</a></li>
       <li><a href="#">Activities in Rio</a></li>
       <li><a href="#">Accommodation</a></li>
       <li><a href="#">News</a></li>
       <li><a href="#">FAQs</a></li>
       <li><a href="#">Contact</a></li>
       <li class="filler">&nbsp;</li>
   </ul>
   </div>
</div>


#cen {
    width: 960px;
    margin: 0 auto;    
    overflow: hidden;
}
.menu {
    width: 1200px;
    float:left;
 }

li {
    padding: 10px 25px;
    float:left;
    background: white;
}

.filler {
    width: 200px;       
}
于 2012-06-12T21:33:56.067 回答
0

摆脱floatonli允许您简单地定义其父级，而无需使用伪类来填充空间。这已经是 100% 的宽度，因为.display: block; background: whiteul:before:afteruldisplay: block

为此，您可以将每个项目显示为inline-block(display: inline和zoom: 1对于 IE6/7) 并粘贴关闭和打开</li><li>标签以避免它们之间的空白。

看到这个小提琴

table-cell小提琴中的奖励：在第二个示例中，项目通过使用（CSS 值，table>tr>td当然不是无语义的 HTML 代码）占据所有可用宽度（不一定漂亮，取决于您的设计和菜单）。对于 IE6/7，与上面相同的回退（和相同的渲染）。

于 2012-06-17T07:26:19.450 回答