如何将图像和输入框放在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;”但它似乎没有帮助

来源

2014-10-11 Summer

尝试< input id =“test1”name =“test1”type =“image”src =“images/f.jpg”value =“myValue”alt =“”/> – SamDeveloper 2014-10-11 17:17:38

您的输入是封闭的窗体，其默认属性是块。因此，display:inline也在您的表单中：

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

来源

2014-10-11 17:22:09 vusan

您需要将某些样式应用于表单元素。添加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/

来源

2014-10-11 18:41:59

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

回答

相关问题