Question

我当前在使用HTML和CSS创建的下拉导航菜单中遇到问题，但是后来当我尝试在UL元素列表之间应用填充时，我发现ex的所有元素中的填充都是不同的。学生框的两侧各有1px的间隙（如果稍微放大一下，您将看到它），列表的其余部分具有比学生框更多或更少的填充。

我在下面附上了CSS和HTML代码的片段：

* {
    margin: 0;
    padding: 0;
}

body {
    background: #34495e;
}

nav {
    width: 100%;
    height: 60px;
    background-color: rgba(49, 45, 45, 0.8);
    text-align: center;
}

nav ul {
    float: left;
}

nav ul li {
    float: left;
    list-style: none;
    position: relative;
}

nav ul li a {
    display: block;
    font-family: sans-serif;
    color: #222;
    font-size: 20px;
    padding: 18px 14px;
    text-decoration: none;
}

nav ul li ul {
    display: block;
    position: absolute;
    background-color: rgba(49, 45, 45, 0.8);
    padding: 1px;
}

nav ul li ul li a {
    padding: 8px 32px;
}

nav ul li a:hover {
    background-color: #2ecc71;
}

nav ul li ul li a:hover {
    background-color: #2ecc71;
}

<html>
    <head>
        <title>Dropdown Menu</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="#">Registration</a>
                    <ul>
                        <li><a href="#">Student</a></li>
                        <li><a href="#">Bus</a></li>
                        <li><a href="#">Route</a></li>
                        <li><a href="#">Driver</a></li>
                    </ul>
                </li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">About Us</a></li>
            </ul>
        </nav>
    </body>
</html>

我们将不胜感激。

Answer 1

请在下拉菜单li中添加width: 100%;。喜欢：

* {
    margin: 0;
    padding: 0;
}

body {
    background: #34495e;
}

nav {
    width: 100%;
    height: 60px;
    background-color: rgba(49, 45, 45, 0.8);
    text-align: center;
}

nav ul {
    float: left;
}

nav ul li {
    float: left;
    list-style: none;
    position: relative;
}

nav ul li a {
    display: block;
    font-family: sans-serif;
    color: #222;
    font-size: 20px;
    padding: 18px 14px;
    text-decoration: none;
}

nav ul li ul {
    display: block;
    position: absolute;
    background-color: rgba(49, 45, 45, 0.8);
    padding: 1px;
}
 

nav ul li ul li {
  width: 100%;
}
nav ul li ul li a {
    padding: 8px 32px;
}

nav ul li a:hover {
    background-color: #2ecc71;
}

nav ul li ul li a:hover {
    background-color: #2ecc71;
}

<html>
    <head>
        <title>Dropdown Menu</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="#">Registration</a>
                    <ul>
                        <li><a href="#">Student</a></li>
                        <li><a href="#">Bus</a></li>
                        <li><a href="#">Route</a></li>
                        <li><a href="#">Driver</a></li>
                    </ul>
                </li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">About Us</a></li>
            </ul>
        </nav>
    </body>
</html>

Answer 2

从width:100%删除填充，并为nav ul li ul li添加* { margin: 0; padding: 0; } body { background: #34495e; } nav { width: 100%; height: 60px; background-color: rgba(49, 45, 45, 0.8); text-align: center; } nav ul { float: left; } nav ul li { float: left; list-style: none; position: relative; } nav ul li a { display: block; font-family: sans-serif; color: #222; font-size: 20px; padding: 18px 14px; text-decoration: none; } nav ul li ul { display: block; position: absolute; background-color: rgba(49, 45, 45, 0.8); } nav ul li ul li { width:100%; } nav ul li ul li a { padding: 8px 32px; } nav ul li a:hover { background-color: #2ecc71; } nav ul li ul li a:hover { background-color: #2ecc71; }。

<html>
    <head>
        <title>Dropdown Menu</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="#">Registration</a>
                    <ul>
                        <li><a href="#">Student</a></li>
                        <li><a href="#">Bus</a></li>
                        <li><a href="#">Route</a></li>
                        <li><a href="#">Driver</a></li>
                    </ul>
                </li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">About Us</a></li>
            </ul>
        </nav>
    </body>
</html>

{{1}}

下拉菜单中的元素之间存在填充问题

2 个答案: