我怎样才能证明这三个 div 在一行上，一个在左边，一个在中间，一个在右边？

Question

我想在一行中显示三个元素：一个向左对齐；第二个在中心并包含子元素；第三个向右对齐，包含一个 DuckDuckGo 搜索框和一个放大镜图像。目前我已经让他们都在同一条线上，但他们没有正确证明。我的代码如下：

#row2 { padding: 5px 0 5px 10px;
margin: 35px 0 20px 0;
font-size: 83%;
width: 100%;
border-top: 2px #f00 solid;
border-bottom: 1px #888 solid; }

#row2 a {border: none; }

#row2-col1 {display:inline;
text-align:left;
margin-right: 40px;}

#row2-col2 {display:inline;
text-align:center; }

.row2-col2-inner {display:inline;
text-align:center;
margin: 0 15px;  }

#row2-col3 {display:inline;
text-align:right; }

form {
display: inline-block;
vertical-align: middle; }

form input[type="text"] {
height: 16px;
width: 200px;
margin-left: 25px;
margin-top: 2px;
font-size: 13px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #000;
vertical-align: top; }

<div id="row2">
<div id="row2-col1">
text</div><!--close r2-c1-->
<div id="row2-col2">
<div class="row2-col2-inner"><a href="#3">One</a></div>
<div class="row2-col2-inner"><a href="#4">Two</a></div>
<div class="row2-col2-inner"><a href="#5">Three</a></div>
<div class="row2-col2-inner"><a href="#6">Four</a></div>
</div><!--close r2-c2-->
<div id="row2-col3">
<form method="get" id="search" action="http://duckduckgo.com/">
<input type="hidden" name="sites" value="foobar.com"/>
<input type="hidden" name="k8" value="#000000"/>
<input type="hidden" name="k9" value="#0000ff"/>
<input type="hidden" name="kaa" value="#880088"/>
<input type="hidden" name="kt" value="a"/>
    <input type="text" name="q" maxlength="255" placeholder="&nbsp;..."/>             

&nbsp;<img src="images/image.gif" height="20" width="20">
</form>
</div><!--close r2-c3-->
</div><!--close row2-->

Answer 1

有一百种不同的方法可以完成你想做的事情：

1. 浮动（简单）
2. 弹性盒（高级）
3. 显示（您正在尝试通过它的外观）
4. 绝对定位（奇怪，但在某些情况下适用）

...等等...

根据您的示例代码，我会保持简单并使用浮点数。此外，IMO，您应该远离使用 id - 改用类。

在下面的示例中，我假设您想要 25%-50%-25%。简单的结构是：

<div class="row">
    <div class="column left">Left side</div>
    <div class="column center">Center column</div>
    <div class="column right">Right</div>
</div>

CSS：

/* overflow and zoom are just to clear the row */
http://learnlayout.com/clearfix.html

.row {
    overflow: auto;
    zoom: 1;
}

.row .column {
    float: left;
}

/* set the width of each column */
.column.left, .column.right {
    width: 25%;
}

.column.center {
    width: 50%;
}

注意：

• 这不考虑填充。如果您想要列之间的间距，则使用填充或边距处理内部内容。
• 这是针对您的情况的具体示例
• 如今，使用网格框架非常普遍。它们为您提供了更多选择，并且是经过试验和测试的技术，可以处理许多边缘情况。搜索 css grid 即可开始。

Answer 2

如果flexbox 是一个选项，您可以将row2 设为flexbox 并根据需要使用justify-content: space-between 对齐 - 参见下面的演示：

#row2 {
  padding: 5px 0 5px 10px;
  margin: 35px 0 20px 0;
  font-size: 83%;
  width: 100%;
  border-top: 2px #f00 solid;
  border-bottom: 1px #888 solid;
  /*ADDED THESE*/
  display: flex;
  justify-content: space-between;
}

#row2 a {
  border: none;
}

#row2-col1 {
  display: inline;
  text-align: left;
  margin-right: 40px;
}

#row2-col2 {
  display: inline;
  text-align: center;
}

.row2-col2-inner {
  display: inline;
  text-align: center;
  margin: 0 15px;
}

#row2-col3 {
  display: inline;
  text-align: right;
}

form {
  display: inline-block;
  vertical-align: middle;
}

form input[type="text"] {
  height: 16px;
  width: 200px;
  margin-left: 25px;
  margin-top: 2px;
  font-size: 13px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #000;
  vertical-align: top;
}

<div id="row2">
  <div id="row2-col1">
    text</div>
  <!--close r2-c1-->
  <div id="row2-col2">
    <div class="row2-col2-inner"><a href="#3">One</a>
    </div>
    <div class="row2-col2-inner"><a href="#4">Two</a>
    </div>
    <div class="row2-col2-inner"><a href="#5">Three</a>
    </div>
    <div class="row2-col2-inner"><a href="#6">Four</a>
    </div>
  </div>
  <!--close r2-c2-->
  <div id="row2-col3">
    <form method="get" id="search" action="http://duckduckgo.com/">
      <input type="hidden" name="sites" value="foobar.com" />
      <input type="hidden" name="k8" value="#000000" />
      <input type="hidden" name="k9" value="#0000ff" />
      <input type="hidden" name="kaa" value="#880088" />
      <input type="hidden" name="kt" value="a" />
      <input type="text" name="q" maxlength="255" placeholder="&nbsp;..." />&nbsp;

      <img src="images/image.gif" height="20" width="20">
    </form>
  </div>
  <!--close r2-c3-->
</div>
<!--close row2-->