在导航栏中并排对齐 3 个 div

Question

我正在尝试在导航栏中并排对齐 3 个 div。在过去的 5 个小时里，我一直在试图解决这个问题，我知道这是一件非常简单的事情，我无法理解。

这就是我现在所处的位置。

如果我浮动右对齐 div，标签“加入和支持”就会堆叠在一起。

<div id="sticky-nav">

    <div class="container">

        <div class="box">

            <div class="align-left">

                <a href="javascript:void(0)" class="active">Home</a> <a

                    href="javascript:void(0)">Listings</a>

            </div>

            <div class="align-center">

                <form action="/action_page.php">

                    <input type="text" placeholder="Search..">

                    <button type="submit">

                        <i class="fa fa-search"></i>

                    </button>

                </form>

            </div>

            <div class="align-right">

                <a href="javascript:void(0)">Join</a> <a

                    href="javascript:void(0)">Support</a>

            </div>

        </div>

    </div>

</div>

#sticky-nav {

    overflow: hidden;

    background-color: #7889D6;

    position: fixed;

    top: 0;

    width: 100%;

}

#sticky-nav a {

    float: left;

    display: block;

    color: #f2f2f2;

    text-align: center;

    padding: 14px 16px;

    text-decoration: none;

    font-size: 17px;

    display: block;

}

#sticky-nav input[type=text] {

    padding: 6px;

    margin-top: 8px;

    font-size: 17px;

    border: none;

    max-width: 300px;

    width: 100%;

}

#sticky-nav button {

    padding: 6px 10px;

    padding-top: 1px; margin-top : 8px;

    margin-right: 16px;

    background: #ddd;

    font-size: 17px;

    border: none;

    cursor: pointer;

    margin-top: 8px;

}

#sticky-nav a:hover {

    background-color: #ddd;

    color: black;

}

#sticky-nav a.active {

    background-color: #4CAF50;

    color: white;

}

.container {

    display: table;

    width: 100%;

}

.box {

    display: table-row;

}

.align-left {

    width: 33%;

    text-align: justify;

    display: table-cell;

    padding: 10px;

}

编辑：这是我想要实现的布局， 

Answer 1

我看到你正在使用display: table来达到这种效果。我强烈建议您先阅读更多内容，然后再继续您的工作或项目。您必须了解的一些布局概念是grid和flex。对于您的情况，我们可以使用弹性盒概念来解决您的问题。flex基本上是一种可以更轻松地在项目之间分配空间的方法。flex-grow就您而言，您可以通过使用和来获得您想要实现的目标flex-basis。flex-basis定义弹性容器内的项目最初应该有多长/多高。flex-grow定义弹性容器内的项目如何根据容器的剩余空间扩展（增长）宽度/高度。对于您的情况，我们可以简单地将 Flex 容器的宽度（您的包装 div）设置为 100%。为了在项目之间均匀分配空间，我们可以将所有项目的初始宽度设置为 0。然后，将每个 Flexbox 项目的容器剩余空间（仍然是 100%）平均分配为 1。flex-grow但是，这将使所有项目的宽度相似。要使中心 div 更宽，可以将 设为flex-grow2。这将使左侧 div、中心 div 和右侧 div 的宽度分别为容器剩余空间的 25%、50% 和 25%。我真的建议进一步阅读有关 Flex 的内容，以理解我的意思。在上面的链接中阅读了有关 flex 的内容后，请尝试访问此和此以了解有关flex-basis和 的更多信息flex-grow。这是一个使用的可行解决方案flex。再次，我建议您阅读更多有关 Flex 的内容，以便您可以更好地使用 Flex。* {  box-sizing: border-box;  margin: 0;  padding: 0;  font-family: Helvetica;}body,html {  width: 100%;  height: 100%;}#wrapper {  display: flex;  width: 100%;}#wrapper * {  padding: 30px;  text-align: center;  color: white;}.left-align,.right-align {  flex-basis: 0;  flex-grow: 1;}.center-align {  flex-basis: 0;  flex-grow: 2;}.left-align {  background: #121212;}.center-align {  background: #232323;}.right-align {  background: #454545;}<div id="wrapper">  <div class="left-align">Some content</div>  <div class="center-align">Some content</div>  <div class="right-align">Some content</div></div>

Answer 2

我为您的布局创建了一个简单的示例。您可以使用 flex box ie 来实现它.box{&nbsp; &nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; &nbsp; width:100%;&nbsp; &nbsp; &nbsp; &nbsp; justify-content:space-between;&nbsp; &nbsp; &nbsp; }这是链接： https:&nbsp;//codesandbox.io/s/optimistic-euclid-xmv6h希望它能回答您的问题。