如何在同一行中制作不同标签的元素，其中没有 space？

Question

我想将这些元素放在同一行中并且不包含 space，如下所示：

我尝试制作一个 div 或使用一个 table，但我没有达到好的结果，因为元素有不同的标签...

所以，这是我的代码：

.fa-search {
  color: #777777;
  background: #f7f7f7;
  border: 0.25px solid #a9a9a9;
}

.fa-check {
  border: 0.25px solid #999999;
  background: #eeffee;
}

[class*="fa-"] {
 width: 21.5px;
 height: 21.5px;
 line-height: 1.2;
 text-align: center;
 cursor: pointer;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<input type="text" id="search_box" placeholder="Search...">
<i class="fa fa-search" id="search_button"></i>
<i class="fa fa-check" id="other_button"></i>

Answer 1

通过像这样添加 CSS 弹性：

.fa-search {
  color: #777777;
  background: #f7f7f7;
  border: 0.25px solid #a9a9a9;
}

.search_container {
  display: flex;
  flex-direction: row;
 }

.fa-check {
  border: 0.25px solid #999999;
  background: #eeffee;
}

[class*="fa-"] {
    width: 21.5px;
    height: 21.5px;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="search_container">
<input type="text" id="search_box" placeholder="Search...">
<i class="fa fa-search" id="search_button"></i>
<i class="fa fa-check" id="other_button"></i>
</div>

Answer 2

这实际上比它应该的要棘手得多。让我们试着理解为什么这些元素没有一步一步地排列起来，然后我们就可以找出需要改变的地方。

注意：这个答案具有学术价值，因为它解释了为什么原始代码不太有效，但是对于更实用的解决方案，请按照 Kummer Wolfe 的答案中的建议使用 flexbox

使用浏览器的计算样式检查器，我可以看到所有这些元素的 display 值为 inline-block。通常 <i> 元素只是内联的，但 Font Awesome 用 fa class 改变了这一点。同时，<input> 个元素默认是 inline-block。

内联元素的垂直对齐方式是使用适当命名的 vertical-align CSS 属性设置的。同样，浏览器的计算样式检查器告诉我们，对于所有这些元素，属性都设置为 baseline。这意味着元素将对齐，以便它们包含的文本对齐，如下例所示。

由于您的元素是图标而不是文本，因此这并不是您真正想要的。您可以做的一件事是将所有这些元素设置为基于它们的中间对齐，vertical-align: middle.

big, small { border: 1px solid blue; display: inline-block; }
.middle>* { vertical-align: middle; }

<p>Here <big>BIG</big> and <small>small</small> are aligned based on the bottom of the letters.</p>
<p class="middle">But here <big>BIG</big> <small>small</small> are aligned based on the middle of their box.

您还需要确保所有元素具有相同的高度，以便它们的顶部和底部边框完美对齐。但是，还有另一个问题。默认情况下，height CSS 属性定义元素内容的高度，不包括边框和填充。因此，即使您将 <input> 和 <i> 元素的高度设置为相同的值，它们也不会对齐，因为它们没有相同的边框和填充。我猜您出于这个原因尝试使用 0.5px 值来处理填充和边框，但如果您希望跨浏览器和设备的行为一致，我不建议使用半像素。

如果您希望高度属性包含边框和内边距，您可以将元素的 box-sizing 属性设置为 border-box。这样，您需要做的就是将两个元素的 height 设置为相同，您就可以开始了。

input {
  box-sizing: border-box;
  height: 22px;
  vertical-align: middle;
}

.fa-search {
  background: #f7f7f7;
  border: 1px solid #a9a9a9;
  color: #777777;
}

.fa-check {
  background: #eeffee;
  border: 1px solid #999999;
}

.fa {
  box-sizing: border-box;
  cursor: pointer;
  height: 22px;
  line-height: 1.2;
  text-align: center;
  vertical-align: middle;
  width: 22px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<input type="text" id="search_box" placeholder="Search...">
<i class="fa fa-search" id="search_button"></i>
<i class="fa fa-check" id="other_button"></i>

为了让事情变得更简单，许多网络开发人员将其放在 CSS 文件的顶部，以确保默认情况下所有元素都使用 border-box。

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

我刚注意到您想去掉元素之间的 spaces。内联块元素的另一个烦人的事情是，它们之间的代码中的任何白色 space 都会折叠成一个 space。如果你不想要它们之间的任何space，你需要删除代码中的space，或者将其放在注释中。

input {
  box-sizing: border-box;
  height: 22px;
  vertical-align: middle;
}

.fa-search {
  background: #f7f7f7;
  border: 1px solid #a9a9a9;
  color: #777777;
}

.fa-check {
  background: #eeffee;
  border: 1px solid #999999;
}

.fa {
  box-sizing: border-box;
  cursor: pointer;
  height: 22px;
  line-height: 1.2;
  text-align: center;
  vertical-align: middle;
  width: 22px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<input type="text" id="search_box" placeholder="Search..."><!--
--><i class="fa fa-search" id="search_button"></i><!--
--><i class="fa fa-check" id="other_button"></i>

是的，这很糟糕，但这是使用行内块元素时唯一的解决方案...

但是尽管如此，以这种方式对齐表单元素特别乏味，而且浏览器之间仍然可能会出现一些不一致。我建议像其他人推荐的那样使用 display: flexbox。您可以在此处了解有关 flexbox 的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

如何在同一行中制作不同标签的元素，其中没有 space？

How to make elements with different tags in the same line without space among them?

html

css

font-awesome