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 =＆＃34; display：inline;＆＃34;但似乎没有帮助

Answer 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/

Answer 2

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

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

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

2 个答案: