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

我遇到了一个非常奇怪的错误（我认为），有一些关于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>

来源

2016-01-09 Hawkeye

你可以使用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/

来源

2016-01-09 02:35:30 Stickers

谢谢你解决我的错误。我不知道是自动关闭的。我不知道为什么我没有添加标签。另外，为什么需要<！DOCTYPE html>？浏览器不应该知道它是来自文件上.html标记的HTML文档吗？ – Hawkeye

不客气，读这篇指的是doctype http://stackoverflow.com/questions/6076432/why-do-i-need-a-doctype-what-does-it-do – Stickers

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

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

来源

2016-01-09 02:44:29

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

回答

相关问题