如何对齐这个导航栏 <li> 标签？答案

【问题标题】：how align this navbar <li> tags?如何对齐这个导航栏 <li> 标签？
【发布时间】：2021-07-11 09:06:56
【问题描述】：

如何对齐这个下拉菜单？

如果我添加填充值 .nav ul li

那么下拉菜单不在中心

对不起我的英语

Lorem ipsum dolor sit amet，consectetur adipiscing elit。整数 mi tortor, imperdiet sed hendrit non, consequat luctus magna。空荡荡的 accumsan odio ac lectus mollis finibus。

对不起，我添加了 lorem ibsum bcoz stackoverflow 无法发布我的问题

/* GLOBAL STYLE */
body {
    margin: 0;
    padding: 0;
    background-color: #F8F8F8;
    font-family: cambria, "Times New Roman", serif;
}

.container {
    width: 960px;
    margin: 0 auto;
    background-color: white;
    padding: 0 20px;
    box-shadow: 1px 0px 15px, -1px 0px 15px;
}

.clear {
    clear: both;
}

/* HEADER */
.header {
    height: 95px;
    background: url('image/mywebsite_logo.png') no-repeat 10px 10px;
}

.header .ads {
    float: right;
    margin-top: 15px;
}

/* NAV BAR */

.nav ul {
    background-color: green;
    margin: 0;
    padding: 0;
    display: block;
}

.nav ul li {
    display: inline-block;
    list-style: none;
    padding: 10px 10px 10px 10px;
    text-align: center;

} 

.nav ul li:hover {
    background-color: red;
}

.nav ul li a {
    text-decoration: none;
    display: block;
    color: white;
}

.nav ul li .submenu {
    display: none;
}

.nav ul li:hover .submenu {
    display: block;
    background-color: green;
    position: absolute;
    margin-top: 10px;
}
.nav ul li:hover .submenu li {
    display: block;
    padding: 8px 16px 10px 0px;
}

.nav ul li .submenu li:hover {
    background-color: greenyellow;
}

.nav ul li .submenu2 {
    display: none;
}

.nav ul li:hover .submenu2 {
    display: block;
    background-color: green;
    position: absolute;
    margin-top: 10px;
}
.nav ul li:hover .submenu2 li {
    display: block;
    text-align: center;
    padding: 10px 41px 9px 10px;
}

.nav ul li .submenu2 li:hover {
    background-color: greenyellow;
}

/* NAVBAR */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mywebsite | The best, awesome website ever by Aufa Riduan Cahyadi C030319100</title>
    <link rel="stylesheet" href="style_fixed.css">
</head>
<body>
    <div class="container">
        <!-- HEADER -->
        <div class="header">
            <a href="iklan.html">
                <img src="image/ads_horizontal.png" class="ads">
            </a>
        </div>

        <!-- MENU NAVIGASI -->
        <div class="nav">
            <ul class="topmenu">
                <li><a href="#">Home</a></li>
                <li><a href="#">Blog</a></li>
                <li class="down"><a href="#">Categories</a>
                    <ul class="submenu">
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">PHP</a></li>
                        <li><a href="#">MySQL</a></li>
                        <li><a href="#">Javascript</a></li>
                    </ul>
                </li>
                <li><a href="#">Our Product</a>
                    <ul class="submenu2">
                        <li><a href="#">eBook</a></li>
                        <li><a href="#">Buku</a></li>
                        <li><a href="#">Video</a></li>
                    </ul>
                
                </li>
                <li><a href="#">Contact Us</a></li>
            </ul>
            <br class="clear">
        </div>
        
        <div class="sidebar">
            <img src="image/gambar4.jpg">
            <ul>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">PHP</a></li>
                <li><a href="#">MySQL</a></li>
                <li><a href="#">JavaScript</a></li>
            </ul>
            <a href="#">
                <img src="image/ads280.png">
            </a>
        </div>

        
        <div class="main">
            <div class="article">
                <h1>Our Best Awesome Article #1</h1>
                <img src="image/gambar1.jpg">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. integer mi
                    tortor, imperdiet sed hendrit non, consequat luctus magna. nullam
                    accumsan odio ac lectus mollis finibus.
                </p>
                <p>
                    Aliquam a lectus porta, bibendum enim id, dictum nunc. duis tincidunt
                    sed turpis non suscipit. Nunc id mi molestie, porta leo id, vulputate eros.
                </p>
            </div>
            <hr class="clear">
            <div class="article">
                <h1>Our Best Awesome Article #2</h1>
                <img src="image/gambar2.jpg">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. integer mi
                    tortor, imperdiet sed hendrit non, consequat luctus magna. nullam
                    accumsan odio ac lectus mollis finibus.
                </p>
                <p>
                    Aliquam a lectus porta, bibendum enim id, dictum nunc. duis tincidunt
                    sed turpis non suscipit. Nunc id mi molestie, porta leo id, vulputate eros.
                </p>
            </div>
            <hr class="clear">
            <div class="article">
                <h1>Our Best Awesome Article #3</h1>
                <img src="image/gambar3.jpg">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. integer mi
                    tortor, imperdiet sed hendrit non, consequat luctus magna. nullam
                    accumsan odio ac lectus mollis finibus.
                </p>
                <p>
                    Aliquam a lectus porta, bibendum enim id, dictum nunc. duis tincidunt
                    sed turpis non suscipit. Nunc id mi molestie, porta leo id, vulputate eros.
                </p>
            </div>
        </div>
        <br class="clear">

        
        <div class="footer">
            <p class="copyright">Copyright Awesome Website 2021</p>
            <ul class="footermenu">
                <li><a href="#">Term of Use</a></li>
                <li><a href="#">Privacy Policy</a></li>
                <li><a href="#">Disclaimer</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </div> 
    </div>
</body>
</html>

【问题讨论】：

做完了，不用回答问题

标签： javascript html frontend

【解决方案1】：

通过我理解的图像后，您希望下拉菜单的宽度与上面的“li”的宽度相同。

因此您可以进行以下更改


.nav ul li{position: relative;}

.nav ul li:hover .submenu{width: 100%; left: 0;}

【讨论】：

【解决方案2】：

在 CSS 的底部（.nav ul li:hover .submenu2 li）你有text-align: center; 这一行。这会使文本水平居中，从而在较小的文本中创建间隙。将其更改为 text-align: left; 以确保它以相同的水平距离开始所有内容。

【讨论】：

【解决方案3】：

首先，你可以添加这个属性，它告诉 html 将元素的大小调整为它的 width，包括填充： *{box-size: border-box;} 不要忘记为每个元素添加严格的框宽度规则。它可以是 %、px、rem 或任何你想要的。

不要忘记，子菜单项的填充不等于其父项，这就是移动子菜单的原因。您可以使用此代码来解决此问题： .submenu ul, .submenu li {width: 100%; box-sizing: border-box;}

如果这不能解决您的问题，请在下方发表评论。

【讨论】：