移动第一个输入旁边的第二个输入

Question

我需要移动第一个输入旁边的第二个输入。如果可能的话，那么当我需要改变HTML时，它是很好的。

<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/"> 
    <div style="float:right;"> 
     <input type="text" size="put_a_size_here" name="s" id="s" value="Otsing..." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/> 
     <input type="submit" id="searchsubmit" value="Otsi" class="btn"/> 
    </div> 
</form> 

这是我目前所面对的

但我想旁边的搜索栏这个 “OTSI” 按钮。我试图用一个输入要做到这一点，但是这没有工作

新增CSS

element { 
} 
.uneditable-input, input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], textarea { 
    background-color: #FFF; 
    border: 1px solid #CCC; 
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset; 
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; 
} 
.uneditable-input, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="tel"], input[type="color"], input[type="search"], select, textarea { 
    display: inline-block; 
    height: 20px; 
    padding: 4px 6px; 
    margin-bottom: 10px; 
    font-size: 14px; 
    line-height: 20px; 
    color: #555; 
    border-radius: 4px; 
    vertical-align: middle; 
} 
.uneditable-input, input, textarea { 
    margin-left: 0px; 
} 
.uneditable-input, input, textarea { 
    width: 80%; 
} 
.uneditable-input, input, textarea { 
    margin-left: 0px; 
} 
button, input, label, select, textarea { 
    font-size: 14px; 
    font-weight: 400; 
    line-height: 20px; 
} 
button, input, select, textarea { 
    font-size: 100%; 
    vertical-align: middle; 
} 
body, button, input, select, textarea { 
    margin: 0px; 
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
} 
body, .navbar .nav > li > a { 
    font-size: 15px; 
    line-height: 20px; 
} 
body, .navbar .nav > li > a { 
    font-family: "Cantarell"; 
    font-weight: 400; 
} 
body { 
    color: #5A5A5A; 
} 
body { 
    font-size: 14px; 
    line-height: 20px; 
} 
html { 
    font-size: 100%; 
} 

感谢您的帮助！

Answer 1

您可以尝试在输入中放置属性“display：inline-block”。我真的不知道你为什么有这个问题我使用铬，我看到两个飞过另一个。但这取决于浏览器。我认为默认输入是内联的，但也许你的浏览器把它们当作块。 EJ的什么IM装盘说：

<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/"> 
<div style="float:right;"> 
    <input style="display:inline-block" type="text" size="put_a_size_here" name="s" id="s" value="Otsing..." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/> 
    <input style="display:inline-block" type="submit" id="searchsubmit" value="Otsi" class="btn"/> 
</div> 

Answer 2

应该已经堆，也许你的CSS被打破它。

这是我的jsfiddle应该工作。

https://jsfiddle.net/0ehtstdb/

<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/"> 
<div style="float:right;display: inline-block;"> 
     <input type="text" size="put_a_size_here" name="s" id="s"placeholder="Otsing..." /> 
     <input type="submit" id="searchsubmit" value="Otsi" class="btn"/> 
    </div> 
</form> 

我还添加了占位符文本所以你不必使用JS在它获得焦点删除文本。