gpt4 book ai didi

html - 如何对齐输入文本和搜索按钮?

转载 作者:行者123 更新时间:2023-11-27 23:33:51 25 4
gpt4 key购买 nike

我遇到了一个非常奇怪的错误(我认为),某些东西使大约 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>

最佳答案

你可以使用 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>是自闭标签,不要使用</input> .

我已经在上面修复了它们。使用 - https://validator.w3.org/ 验证您的标记

关于html - 如何对齐输入文本和搜索按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34689043/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com