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 <!DOCTYPE html>。
缺少<title>代码。
也缺少<body>代码。
未开启的</script>。
<input>是自动关闭标记，请勿使用</input>。

我已将它们全部固定在上面。使用 - https://validator.w3.org/

来标记您的标记

Answer 2

简单删除高度并将填充添加到按钮。

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

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

2 个答案: