如何将图像和输入框放在HTML的同一行?

时间:2014-10-11 17:13:49

标签: python 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 =&#34; display:inline;&#34;但似乎没有帮助

2 个答案:

答案 0 :(得分:1)

您需要将一些样式应用于表单元素。添加css属性display(inline),width(默认情况下需要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;
}

http://jsfiddle.net/g13qo0va/

答案 1 :(得分:0)

您的输入是由默认属性为block的表单括起来的。因此,表单中的display:inline也是:

<form action="/result" method="post" style="display:inline">