Question

如何在不添加填充的情况下将我的内容对齐到导航栏中的中间？我不想增加背景。没有其他细节可以添加。谢谢你。谢谢你。谢谢你。谢谢你。谢谢你。谢谢你。谢谢你。谢谢你。谢谢你。谢谢你。谢谢。

    * {
        padding: 0;
        margin: 0;
        text-decoration: none;
        list-style: none;
        box-sizing: border-box;
    }
    
    body {
        font-family: Arial, Helvetica, sans-serif;
    }
    
    nav ul li a {
        font-size: 26px;
        color: white;
    }
    
    ul {
        position: fixed;
        width: 100%;
        height: 50vh;
        background: #091624;
        top: auto;
        left: auto;
        text-align: center;
    }
    
    nav ul li {
        display: block;
        margin: 20px 0;
        line-height: normal;
    }
    
    a.content,
    a:hover {
        background: #1b9bff;
        transition: .5s;
    }
    
    @media screen and (min-width: 768px) {
        nav {
            height: 80px;
            width: 100%;
        }
        nav ul {
            position: fixed;
            float: right;
            margin-right: 40px;
            text-align: right;
            height: 60px;
        }
        nav ul li {
            display: inline-block;
            line-height: 80px;
            margin: 0 5px;
        }
        nav ul li a {
            color: white;
            font-size: 17px;
            padding: 7px 13px;
            border-radius: 3px;
        }
    }

<!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">
    <link rel="stylesheet" href="/css/styles.css">
    <title>Responsive Navigation Bar</title>
</head>

<body>
    <nav>
        <ul class="content">
            <li><a href="#">About</a></li>
            <li><a href="#">Courses</a></li>
            <li><a href="#">Forum</a></li>
            <li><a href="#">Learning Paths</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</body>

</html>

Image of live server

Answer 1

在你的更宽屏幕的 CSS 中，你需要移除右对齐：

    @media screen and (min-width: 768px) {
        nav {
            height: 80px;
            width: 100%;
        }
        nav ul {
            position: fixed;
            float: right;
            margin-right: 40px;
            /* REMOVE THIS LINE text-align: right; */
            height: 60px;
        }

在中心对齐内容

1 个答案: