CSS vertical-align 带有相邻文本的文本输入字段

Question

我想将文本输入字段与相邻文本垂直对齐，即，在它前面有一个标题，在它后面有一个单选按钮（所有样式都带有 display: inline）。这是我希望看到的图像：

现在，如果输入字段中没有 vertical-align 属性，我会得到以下信息：

即输入字段低于相邻文本。在输入字段上尝试 vertical-align 的可能值，我意识到 vertical-align: super 给了我想要的东西（即，在第一张图片中可以看到的东西）。但是我不明白为什么它给了我想要的东西。我原以为 vertical-align: baseline 或 vertical-align: text-bottom 会做我需要的。所以我的问题是：为什么 vertical-align: super 会产生这样的结果？它给了我我想要的东西（即解决方法而不是解决方案）是巧合吗？如果是这样，正确的解决方案是什么？

这是我的 HTML 和 CSS:

h1,
form,
div.search {
  display: inline;
}

input#search_string {
  vertical-align: super;
}

<html>

<head>
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="test.css" />
</head>

<body>
  <h1>Heading</h1>
  <form>
    <div class="search">
      <input type="text" id="search_string" />
      <input type="radio" id="option" />
      <label for="option">Some option</label>
    </div>
  </form>
</body>

</html>

Answer 1

vertical-align 的默认设置确实是“基线”，在您的示例中也是如此。您忘记的是基线对齐不对齐输入框的底部边界线，而是对齐该框内的 text 的基线。如果你在那里写东西，你就会看到它。（顺便说一句，如果您创建一个带有边框和内部文本的 div 也是一样的。）

在下面的代码片段中（除了没有定义对齐，即默认，即“基线”之外，它与您的代码几乎相同）我在输入标签中添加了一个 value 文本，所以在这里你查看基线对齐。

h1,
form,
div.search {
  display: inline;
}

<html>

<head>
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="test.css" />
</head>

<body>
  <h1>Heading</h1>
  <form>
    <div class="search">
      <input type="text" id="search_string" value="here's some text" />
      <input type="radio" id="option" />
      <label for="option">Some option</label>
    </div>
  </form>
</body>

</html>

我会说是的，super 设置为您提供的结果非常接近您认为正确的预期结果，这纯属巧合。 super实际上只是表示元素被“凸起”（抱歉，我不知道英文单词，但它就像“三的二的幂”中的数字“2”）。

我猜想实现您想要的效果的最安全方法是将 position: relative; 应用到该输入字段，并使用 bottom 设置使其偏离默认对齐方式。如果你在那里使用 em 单位（就像我在下面所做的那样），它是相对于字体大小的，但要找到一个合适的值仍然是一个反复试验的问题：

h1,
form,
div.search {
  display: inline;
}

#search_string {
  position: relative;
  bottom: 0.3em;
}

<html>

<head>
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="test.css" />
</head>

<body>
  <h1>Heading</h1>
  <form>
    <div class="search">
      <input type="text" id="search_string"  />
      <input type="radio" id="option" />
      <label for="option">Some option</label>
    </div>
  </form>
</body>

</html>

CSS vertical-align 带有相邻文本的文本输入字段

CSS vertical-align text input field with adjacent text

html

css

vertical-alignment