如何将图像和输入框放在HTML中的同一行上?
问题描述:
在我的主网页,我有 ● 页面的标志●输入框输入关键字串 ●一个按钮,提交关键词如何将图像和输入框放在HTML中的同一行上?
但是,输入框和提交按钮都低于我的标志。 我想把它们放在与Bing相同的线上。
@get('/')
def search():
<img src="./images/logo.png" width=200 height=300 style="display:inline;">
<form action="/result" method="post"> Hit Please:<input name="keywords"type="text" />
<input value="GO" type="submit" />
</form>
我试着把style =“display:inline;”但它似乎没有帮助
答
您的输入是封闭的窗体,其默认属性是块。因此,display:inline
也在您的表单中:
<form action="/result" method="post" style="display:inline">
答
您需要将某些样式应用于表单元素。添加CSS属性显示(内联),宽度(默认情况下需要100%)。向左飘浮)。
示例代码
HTML
<img src="https://www.google.co.in/images/srpr/logo11w.png" width="200" height="300" style="display: inline;float: left;">
<form action="/result" method="post" >
<label style="display: inline;">Hit Please:</label>
<input name="keywords" type="text" style="display:inline;">
<input value="GO" type="submit" style="display:inline;">
</form>
CSS
form {
display: inline;
width: 200px;
margin-left: 20px;
line-height: 300px;
vertical-align: middle;
}
尝试 – SamDeveloper 2014-10-11 17:17:38