时间戳

首页 > 解决方案 > 在导航链接 HTML/CSS 之间创建空间

html - 在导航链接 HTML/CSS 之间创建空间

问题描述

我是 HTML/CSS 的新手。由于“收藏”和“火花”似乎相互重叠，我正试图在导航链接上分隔项目。有什么办法可以解决这个问题，为什么会这样？我应该使用 Flexbox 还是网格来完成这个？我已经包含了下面的代码。

    <!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>My Website</title>
    <link rel="stylesheet" href="nav.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" 
    crossorigin>
    <link href="https://fonts.googleapis.com/css2? 
    family=Ubuntu:wght@500&display=swap" rel="stylesheet">
    </head>

    <body>

    <div class="navigation-wrapper">

        <div class="left-column">
            <img src="Logos/codepen-wordmark-display-inside- 
   white@10x.png" alt="Logo">
        </div>


        <div class="center-column">
            <div class="links-wrapper">

                <div class="nav-link">
                    <a href="pens.html">Pens</a>
                </div>

                <div class="nav-link">
                    <a href="projects.html">Projects</a>
                </div>

                <div class="nav-link">
                    <a href="posts.html">Posts</a>
                </div>

                <div class="nav-link">
                    <a href="collections.html">Collections</a>
                </div>

                <div class="nav-link">
                    <div class="icon">
                            <i class="fas fa-chevron-down"></i>
                        <a href="spark.html">Spark</a>
                    </div>    
                    
                </div>
            </div>
        </div>
    </div>
    
   </body>
   </html>

    .navigation-wrapper {
    color: #cbcbcb ;
    height: 30px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 50px 10px 35px 5px;
    background-color: black;
    }

    .navigation-wrapper > .left-column {
    margin-left: 15px;
    margin-bottom: 30px;
    width: 250px;
    }

    .navigation-wrapper > .left-column img {
    align-items: top;
    width: 175px;
    padding: 30px 50px 10px 15px;
    }

    .navigation-wrapper > .center-column {
    display: flex;
    padding: 50px 30px 10px 10px;
    justify-content: space-between;
    align-items: center;
    }

     .navigation-wrapper > .center-column > .links-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .navigation-wrapper > .center-column > .links-wrapper > .nav-link {
        width: 70px;
        text-align: center;
    }

    ------CSS Here------

    .navigation-wrapper {
    color: #cbcbcb ;
    height: 30px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 50px 10px 35px 5px;
    background-color: black;
    }

    .navigation-wrapper > .left-column {
    margin-left: 15px;
    margin-bottom: 30px;
    width: 250px;
    }

    .navigation-wrapper > .left-column img {
    align-items: top;
    width: 175px;
    padding: 30px 50px 10px 15px;
    }

    .navigation-wrapper > .center-column {
    display: flex;
    padding: 50px 30px 10px 10px;
    justify-content: space-between;
    align-items: center;
    }

    .navigation-wrapper > .center-column > .links-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    }

    .navigation-wrapper > .center-column > .links-wrapper > .nav-link {
    width: 70px;
    text-align: center;
    }

    .nav-link a {
    color:#cbcbcb;
    text-decoration: none;
    font-family: 'Ubuntu', sans-serif;
    font-size: 20px;
    font-weight: bold;
    transition: 1.0s;
    }

标签： htmlcss

解决方案

        .head{
            display:flex;
        }
        .navbar{
            display:flex;
        }
        a{
            text-decoration:none;
            margin-right:2rem;
        }
        li{
            list-style:none;
        }

        img{
            width:10%;
        }
<!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>Document</title>

  </head>

  <body>
    <header class="head">
        <div class="logo">
            <img src="https://images.unsplash.com/photo-1575881875475-31023242e3f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="">
        </div>
      <nav class="navbar">
        <li><a href="#">Pens</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Posts</a></li>
        <li><a href="#">Collections</a></li>
        <li><a href="#">Spark</a></li>
      </nav>
    </header>
  </body>
</html>

推荐阅读