如何在 CSS 布局中将元素推送到其容器的末尾？答案

【问题标题】：How do I push an element to the end of it's container in CSS Layout?如何在 CSS 布局中将元素推送到其容器的末尾？
【发布时间】：2020-07-03 20:34:32
【问题描述】：

我正在尝试使用 CSS 布局创建一个标题，但我无法将我的“联系人”元素放置在它的容器“主导航”的最右侧。我在 html 和 css 代码中尝试了以下内容，但“contacts”元素仍然位于“main-nav”容器中的其他元素所在的位置。请帮忙！ PS：我是开发新手。我希望我能很好地解释我的烦恼。谢谢

<!DOCTYPE html>
<html>
<head>
    <title>MY WEB LAYOUT</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <nav class="zone green">
        <ul class="main-nav">
            <li><a href="">About</a></li>
            <li><a href="">Products</a></li>
            <li><a href="">Our Team</a></li>
            <li class="push"><a href="">Contacts</a></li>
        </ul>
    </nav>
    <div class="zone red">Cover</div>
    <div class="zone blue">Project Grid</div>
    <div class="zone yellow">Footer</div>
</body>
</html>

/* CSS */

body {
    margin: auto 0;
}

.zone {
    /*padding: 30px 50px;
    margin: 40px 60px;*/
    cursor:pointer;
    /*display:inline-block;*/
    color: #FFF;
    /*text-align: center;*/
    font-size:2em;
    border-radius:4px;
    border:1px solid #bbb;
    transition: all 0.3s linear;
}

.zone:hover {
    -webkit-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
    -moz-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
    -o-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
    box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}

/* NAV */
.main-nav {
    display: flex;
    list-style: none;
    font-size: 0.7em;
    margin: 0;
}

.contacts {
    display: flex;
    justify-content: space-between; 
    align-items: center;
}

.push {
    display: flex;
    float: right;
    justify-content: flex-end;
    margin-left: auto;
}

li {
    padding: 20px;
}

a {
    color: #f5f5f6;
    text-decoration: none;
}

【问题讨论】：

标签： html css layout

【解决方案1】：

我们将 Display flex 用于容器而不是子容器。

使用以下代码更改您的导航部分代码：

 <nav class="zone green">
        <ul class="main-nav">
            <li><a href="">About</a></li>
            <li><a href="">Products</a></li>
            <li><a href="">Our Team</a></li>
        </ul>

        <a href="">Contacts</a></li>
  </nav>

然后添加以下css：

 .zone{
        display: flex;
        justify-content: space-between;  
    }

结果（运行代码查看结果）：

 .zone{
        display: flex;
        justify-content: space-between;  
    }

 <nav class="zone green">
        <ul class="main-nav">
            <li><a href="">About</a></li>
            <li><a href="">Products</a></li>
            <li><a href="">Our Team</a></li>
        </ul>

        <a href="">Contacts</a></li>
    </nav>

此时您只需要添加样式的其余部分。

【讨论】：

谢谢。尽管您向我展示的代码示例使联系人出现在不同的行上；它确实让我知道该怎么做。我的代码现在已经有效运行了。

【解决方案2】：

分配位置 :relative ;到#mainnav 并添加对联系人的权限 e。 g 对：-20px 或 20px；在 css 中试试这个。希望对您有所帮助。

【讨论】：

无法运行您的建议，因为我的 html 中没有 #Id 属性。无论如何，谢谢，我的代码已经有效运行。我把 display: flex;在我的CSS中.push子之前的容器中，它最终起作用了。非常感谢。 PS：我还在我的 CSS 中删除了 .contacts 元素代码，因为我只在我的 html 中写了一个 .push 属性，所以它是无效的。