Question

如何使用纯CSS对齐导航链接和品牌名称？在品牌容器和链接容器上包含浮标后，它会对齐。 Screenshot image here:

HTML

<!DOCTYPE html>
<hmtl>
    <head>
        <title>My Portfolio</title>
        <meta name="author" content="Rocky">
        <meta name="description" content="Sample Portfolio">
        <link rel="stylesheet" href="css/styles.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans|Poppins">
        <script type="text/javascript" src="js/script.js"></script>
    </head>

    <body>
        <header class="header">
            <nav class="nav-bar">
                <section class="nav-container">
                    <section class="brand-container">
                        <h2 class="brand-name">Rocky</h2>
                    </section>

                    <ul class="link-container">
                        <li><a class="nav-link" href="#">Home</a></li>
                        <li><a class="nav-link" href="#">About Me</a></li>
                        <li><a class="nav-link" href="#">My Works</a></li>
                        <li><a class="nav-link" href="#">My Challenge</a></li>
                        <li><a class="nav-link" href="#">Contact Me</a></li>
                    </ul>
                </section>
            </nav>
    </header>

CSS

* {
    margin: 0; padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Open Sans';
    overflow-x: hidden;
}
a {
    text-decoration: none;
}
.header {
    height: 100vh; width: 100vw;
    background: url('../img/header_img.jpg') top center / cover fixed no-repeat;
    z-index: 1030;
}
.nav-bar {
    position: fixed;
    width: 100%;
    border-bottom: 1px solid #EEE;
    z-index: 1031;
}
.nav-container {
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
}
.brand-container {
    float: left;
    display: inline-block;
}
.brand-name {
    position: relative;
    padding: 5px 10px;
    border-radius: 4px;
    font-family: 'Poppins';
    color: #444;
    background: #EEE;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.link-container {
    position: relative;
    list-style-type: none;
    float: right;
}
.link-container li {
    padding: 20px 15px;
    display: inline-block;
}
.link-container li a {
    font-family: 'Poppins';
    color: #EEE;
    transition: color 150ms linear;
}
.link-container li a:hover {
    color: #CCC;
}

如何解决此问题以使其对齐？我尝试过将它们分开的所有方法，并使用了几个CSS属性来完成它不起作用的工作。

Answer 1

因此，浮点数是将元素设置在右侧或左侧的一种非常“棘手的”解决方案，通常应尽可能避免使用。使用不同的显示设置应该可以让您看起来更漂亮。

display: grid;

例如，

允许您将导航分为几列，并将元素放入所需的任何列。我制作了一个codepen，该文件显示了我认为适合放置的外观。如果您有任何疑问或任何疑问，请随时提问！希望对您有所帮助！

浮动后链接和品牌名称未对齐-纯CSS

1 个答案: