Question

没有为我的'nav ul li'调整我的填充，因为它用于间隔导航链接，我怎么能填充下拉链接背景'nav ul li ul li'的全宽，因为它似乎只填充了一半背景颜色。

    (HTML):

    <nav>
    <ul>
        <li><a href="#">Num 1</a></li>
        <li><a href="#">Num 2</a></li>
        <li><a href="#">Num 3</a></li>
        <li><a href="#">Num 4</a></li>
        <li><a href="#">Num 5</a></li>
        <li><a href="#">Num 6</a>
            <ul>
                <li><a href="#">Drop 1</a></li>
                <li><a href="#">Drop 2</a></li>
            </ul></li>
        <li><a href="#">Num 7</a></li>
    </ul>
</nav>

    (css)

JSFIDDLE

注意：选择不上传CSS，因为我必须使用哈佛引用系统，并且与在线片段相比，任何相似之处都会返回更高的抄袭百分比，即使这是我自己的工作，所以我会选择上传更精确的代码在JSFiddle上，因为它没有从抄袭测试中返回。

Answer 1

这是working demo

将您的填充从li更改为a：

nav ul li  a {width:65px; display:inline-block; padding:0 30px}

并将显示和浮动属性添加到second-level li：

nav ul li ul li { padding:0; border:none;display: list-item;float: none }

Answer 2

快速解决此问题的方法是，不要添加填充，只需在右侧和左侧添加30px到导航ul li的总宽度，最终为125px

nav ul li {
  border-right: 1px solid #355e7f;
  display: inline-block;
  float: left;
  width: 125px;
}

这是更新的JSFIDDLE

希望有所帮助！

CSS导航下拉填充

2 个答案: