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

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>

这就是我现在所拥有的

但我想要这个＆＃34; Otsi＆＃34;搜索栏旁边的按钮。我尝试用一​​个输入来做这个，但这没有用

添加了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

它应该已经堆叠，也许你的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来获取焦点时删除文本。

Answer 2

您可以尝试放置属性＆＃34; display：inline -block＆＃34;在输入中。我真的不知道为什么你有这个问题我使用铬，我看到两个翅膀彼此。但这取决于浏览器。我认为默认输入是内联的，但也许你的浏览器将它们视为块。 我想说的是什么：

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