Question

所以我正在为一个学校项目创建一个网站，我想知道如何在将鼠标悬停在第一个和最后一个链接上时删除菜单两侧的空白区域。这是fiddle。

对不起，如果我的代码不是很好，我是初学者...... 另外我注意到我的菜单保持不动，但在不同的分辨率下，其他一切都变得疯狂。我如何得到它，以便所有东西在不同分辨率下保持相对相同的位置？

感谢。

哦，这是html：

<body>
    <h1 class='titles'>Phosphorus 4 Dummies</h1>
    <nav>
        <ul class='menu'>
            <li id='home'><a href='#'>Home</li></a>
            <li id='phys'><a href='#'>Phys. Prop.</li></a>
            <li id='chem'><a href='#'>Chem. Prop.</li></a>
            <li id='facts'><a href='#'>Fun Facts</li></a>
        </ul>
    </nav>
    <p class='info'>Phosphorus is a very reactive element in the Nitrogen Group. It has 15 protons, 16 neutrons, and 5 valence electrons. It is a non-metal so it can be found on the right side of the zig-zag along with other non-metals. Its symbol is a simple P.</p>
    <img src='http://images-of-elements.com/red-phosphorus.jpg' id='redPhosphorus' height=300px />

和css：

body {
    margin: 300px;
    padding: 0px;
}

.titles {
    font-size: 72px;
    font-family: Helvetica, sans-serif;
    text-align: center;
    position: relative;
    bottom: 100px;
}

.menu {
    position: relative;
    width: 760px;
    bottom: 330px;
    margin: auto;
    margin-bottom: 0px;
    text-align: center;
    border: 2px solid black;
    border-radius: 5px;
    padding: 0;
    font-size: 0;
}

.menu li {
    font-size: 36px;
    font-family: Helvetica, sans-serif;
    display: inline-block;
    position: relative;
    top: 0;
    float: none;
}

.menu li a {
    text-decoration: none;
    color: black;
    padding-right: 11px;
    padding-left: 11px;
    padding-top: 0px;
    padding-bottom: 1px;
    border-right: 2px solid black;
    margin: 0;
}

.menu li:nth-child(4) a {
    border: none;
}

.menu li a:hover {
    background-color: orange;
}

Answer 1

我看了你的代码，你错误地嵌套了这些元素，请务必先关闭a标记

<li><a></li></a>

应该是：

<li><a></a></li>

Answer 2

有空格，因为menu设置为width: 760px，但您的菜单列表并不适合所有方式，因此存在空格。

此外，要使其响应，您需要使用媒体查询。

<强>更新

如果您知道预期结果[高度，宽度等]，则必须将<nav>设置为宽度，将<ul>设置为更大的宽度，但添加overflow: hidden和height: 41px

这是一个fiddle to experiment。你没有理想的布局，但我已经用你所做的。如果有人找到更好的解决方案，我会非常乐意观察。

如何摆脱菜单中的空白

2 个答案: