时间戳

首页 > 解决方案 > 如何在 flexbox 中使用自动边距

html - 如何在 flexbox 中使用自动边距

问题描述

我正在制作导航栏。但我有问题。我想将 2 个项目重定向到右侧，但其中 1 个向右，其中 1 个在中间 我不能使用浮动，因为我使用 flexbox 我搜索到谷歌 他说使用边距自动我使用边距自动，但其中一个往中间我想要两个他们中的一部分以很小的间距向右走（链接和联系人）

我的 HTML 代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>try making site</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.css">

</head>

<body>
    <nav>
        <ul>
            <li class="active"><a href="#"> Home </a></li>
            <li>
                <a href="#">projects <i class="fas fa-caret-down"></i></a>
                <ul>
                    <li><a href="#">open source</a></li>
                    <li><a href="#">close source</a></li>
                </ul>
            </li>
            <li><a href="#"> CV </a></li>
            <li class="f-right"><a href="#"> Contacts </a></li>
            <li class="f-right"><a href="#">links</a></li>
        </ul>
    </nav>



    <script src="node_modules/@fortawesome/fontawesome-free/js/all.js"></script>
</body>

</html>

我的 CSS 代码：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

nav {
    background: #F8F8F8;
}

nav > ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

nav > ul > li {
    padding: 20px 20px;
    position: relative;
}
nav > ul > li > a{
    font-family: sans-serif;
    font-size: 1.25em;
    text-decoration: none;
    color: #777;
}

nav > ul > li > a:hover {
    color: #333;
}

nav > ul > .active > a{
    color: #555;
}
nav > ul > .active{
    background: #D5D5D5;
}

nav > ul > li > ul {
    display: none;
    position: absolute;
    list-style: none;
    top: 4.2vh;
    left: 0px;
    width: 103%;
    text-align: center;
}
nav > ul > li:hover > ul, nav >ul > li > ul:hover {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
nav > ul > li > ul > li > a {
    text-decoration: none;
    font-family: sans-serif;
    color: #777;
}

nav > ul > li > ul > li > a:hover {
    color: #333;

}

nav > ul > li > ul > li {
    padding: 1vh 0.75vh;
    background: #F8F8F8;
}
.f-right {
    margin-left: auto;
    margin-right: 20px;
}

联系方式居中，但我希望联系方式正确，如链接（边距很小）谢谢！

标签： htmlcssflexboxnavbarnav

解决方案

如果我理解正确，请尝试这样：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

nav {
    background: #F8F8F8;
}

nav > ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

nav > ul > li, nav > ul > div > li {
    padding: 20px 20px;
    position: relative;
}
nav > ul > li > a, nav > ul > div > li > a {
    font-family: sans-serif;
    font-size: 1.25em;
    text-decoration: none;
    color: #777;
}

nav > ul > li > a:hover {
    color: #333;
}

nav > ul > .active > a{
    color: #555;
}
nav > ul > .active{
    background: #D5D5D5;
}

nav > ul > li > ul {
    display: none;
    position: absolute;
    list-style: none;
    top: 4.2vh;
    left: 0px;
    width: 103%;
    text-align: center;
}
nav > ul > li:hover > ul, nav >ul > li > ul:hover {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
nav > ul > li > ul > li > a {
    text-decoration: none;
    font-family: sans-serif;
    color: #777;
}

nav > ul > li > ul > li > a:hover {
    color: #333;

}

nav > ul > li > ul > li {
    padding: 1vh 0.75vh;
    background: #F8F8F8;
}
.f-right {
    display: flex;
    margin-left: auto;
    margin-right: 20px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>try making site</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.css">

</head>

<body>
    <nav>
        <ul>
            <li class="active"><a href="#"> Home </a></li>
            <li>
                <a href="#">projects <i class="fas fa-caret-down"></i></a>
                <ul>
                    <li><a href="#">open source</a></li>
                    <li><a href="#">close source</a></li>
                </ul>
            </li>
            <li><a href="#"> CV </a></li>
            <div class="f-right">
              <li><a href="#">Contacts</a></li>
              <li><a href="#">links</a></li>
            </div>
        </ul>
    </nav>



    <script src="node_modules/@fortawesome/fontawesome-free/js/all.js"></script>
</body>

</html>

推荐阅读