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

Question

在我的主页上，我●页面的徽标●用于输入关键字字符串的输入框●提交关键字的按钮

但是，输入框和提交按钮都在我的徽标下方。 我想把它们放在与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;” 但似乎没有帮助

Answer 1

您需要将一些样式应用于form元素。 添加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;
}

http://jsfiddle.net/g13qo0va/

Answer 2

您的输入将被窗体括起来，其默认属性为block。 因此在您的表单中display:inline ：

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