表单输入对齐问题 (HTML/CSS)
[英]Form Input Alignment Issue (HTML/CSS)
问题描述
Context:
语境：
I'm relatively new to HTML/CSS and have been tasked with creating a search form for my company's website.我对 HTML/CSS 比较陌生，并且一直负责为我公司的网站创建一个搜索表单。 I have all the actual code working beautifully, but the thing thats stumping me is a simple style issue.我让所有实际代码都运行得很漂亮，但让我难受的是一个简单的样式问题。 In the search form, the text input field and the button input field do not align vertically very nicely, and I cannot get them to cooperate via CSS.在搜索表单中，文本输入字段和按钮输入字段的垂直对齐不太好，我无法通过 CSS 使它们协同工作。 I'd like them both to be the same height and level with each other.我希望它们彼此具有相同的高度和水平。 Any advice?有什么建议吗？ Thank you!谢谢！
Code:代码：
#srchContainer { width: 70%; height: 100%; border: 0px; margin: 0 auto; padding: 0; } #searchForm { text-align: center; margin: 20px auto; padding: 0; width: 100%; vertical-align: top; } #searchInputBox { width: 60%; height: 31px; border: 1px solid #717171; font-size: 1.5em; margin: 0; padding: 0 0 0 5px; display: inline; } #srchBtn { height: 32px; margin-left: 2px; margin-top: 0; margin-bottom: 0; padding-left: 6px; padding-right: 6px; padding-bottom: 0px; padding-top: 1px; display: inline; } .btn { color: #717171; border-radius: 0px; padding-left: 6px; padding-right: 6px; padding-bottom: 1px; padding-top: 1px; border: 1px solid #717171; margin-left: 2px; margin-right: 2px; margin-top: 0px; margin-bottom: 2px; height: 20px; } .btn:hover, .btn2:hover { background-color: #717171; color: white; }
<html> <body> <div id="searchContainer"> <form id="searchForm"> <input type="text" id="searchInputBox" /> <input type="button" id="srchBtn" class="btn" value="Search" /> </form> </div> </body> </html>
2 个解决方案
解决方案1
1 已采纳 2015-11-11 16:30:13
Apply vertical-align: middle;应用vertical-align: middle; to both of the input elements.到两个输入元素。
解决方案2
0 2015-11-11 16:31:44
You can easily work in the alignment using the CSS flexbox .您可以使用 CSS flexbox轻松地进行对齐。
See the following link to check the browser support .请参阅以下链接以检查browser support 。
Here´sa quick example:这是一个快速示例：
.navbar { display: flex; } .navbar input { flex: 1; } .navbar button { border: 1px solid #aaa; margin-left: 3px; }
<div class="navbar"> <input type="text"> <button type="button">search</button> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.