如何对齐输入文本和搜索按钮？

Question

我遇到了一个非常奇怪的错误（我认为），某些东西使关于 2px 的按钮低于搜索框。谁能告诉我如何解决这个问题？

#form {
  text-align: center;
}
#Bar {
  height: 35px;
  width: 400px;
  font-size: 20px;
}
#sea {
  background-color: #ffffff;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  height: 35px;
  color: #000000;
  font-family: Arial;
  border-style: solid;
  border-width: 1px;
  font-size: 15px;
  text-decoration: none;
  border-color: #B9B9B9;
}
body {
  margin: 0 auto;
  font-family: Arial;
}

<html>

<head>
  <link rel="stylesheet" href="test.css" />
</head>
  
<hr>

<form id="form">
  <input id="Bar" name="Input" type="text" placeholder="Search for word or phrase"></input>
  <button id="sea">Search</button>
  <br>
  <input type="radio" name="textOp" checked="checked">Highlight</input>
  <input type="radio" name="textOp">Filter</input>
</form>

</script>

</html>

Answer 1

您可以使用 box-sizing: border-box; 来获取您设置的实际高度。

设置 vertical-align: top; 使它们与顶部对齐。

减少文本输入font-size，好像20px太大了，让方框变高了。

#form {
  text-align: center;
}
#Bar {
  height: 35px;
  width: 400px;
  font-size: 15px;
  box-sizing: border-box;
  vertical-align: top;
}
#sea {
  background-color: #ffffff;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  height: 35px;
  color: #000000;
  font-family: Arial;
  border-style: solid;
  border-width: 1px;
  font-size: 15px;
  text-decoration: none;
  border-color: #B9B9B9;
  box-sizing: border-box;
  vertical-align: top;
}
body {
  margin: 0 auto;
  font-family: Arial;
}

<!DOCTYPE html>
<html>

<head>
  <title>Untitled</title>
  <link rel="stylesheet" href="test.css" />
</head>

<body>
  
  <hr>

  <form id="form">
    <input id="Bar" name="Input" type="text" placeholder="Search for word or phrase">
    <button id="sea">Search</button>
    <br>
    <input type="radio" name="textOp" checked="checked">Highlight
    <input type="radio" name="textOp">Filter
  </form>

</body>

</html>

错误需要修复：

不要忘记添加文档类型 <!DOCTYPE html>。
缺少 <title> 标签。
还缺少 <body> 标签。
未开封</script>.
<input>是self-closing标签，不要用</input>.

我已经把它们都修好了。使用 - https://validator.w3.org/

验证您的标记

Answer 2

简单删除高度并向按钮添加内边距。

#sea {
 padding: 9px 5px 7px;
}

如何对齐输入文本和搜索按钮？

How can I align input text and search button?

html

css

alignment