Question

我有一个输入框供用户输入搜索条件。我在搜索框旁边有一个输入按钮。由于某种原因，按钮在搜索框下方呈现。

我希望按钮位于输入框旁边。

我的HTML：

 <div id="searchbox">
                <form method="post" action="/search/test">
                <div class="searchinput">
                    <input type="text" id="searchbox" value="" /></div>
                <div class="searchbutton">
                    <input type="submit" id="searchboxbutton" value="Go" /></div>
                </form>
            </div>

CSS：

#header #searchbox 
{
    float:left;
    width:400px;
    padding:5px 0px 0px 0px;
}
#header #searchbox #searchinput
{
    display:inline;
    float:left;
}
#header #searchbox #searchbox
{
    display:inline;
    float:left;
}
#header #searchbox #searchbutton 
{
    display:inline;
    float:left;
}

Answer 1

简化，简化和简化。

HTML

    <form method="post" action="/search/test">
        <input type="text" id="searchbox" value="" />
        <input type="submit" id="searchboxbutton" value="Go" />
    </form>

CSS

input {display: inline}

Answer 2

您的<input type="text" id="searchbox" value="" />也符合此款式（宽度：400px）：

#header #searchbox 
{
    float:left;
    width:400px;
    padding:5px 0px 0px 0px;
}

ID必须是唯一的 - 更改它或包含元素并相应地编写样式。

http://validator.w3.org/docs/errors.html

141：ID X已定义
An "id" is a unique identifier. Each time this attribute is used in a
文件必须有不同之处值。如果您使用此属性作为样式表的钩子，它可能是更适合使用类（其中组元素）比id（是用于确定一个元素。

Answer 3

可能是因为您的#searchbox宽度为400px且输入标签和按钮标签超过400像素。

尝试将#searchbox宽度设置为600px，看看会发生什么。

从

更改您的CSS

#header #searchbox 
{
    float:left;
    width:400px;
    padding:5px 0px 0px 0px;
}
#header #searchbox #searchinput
{
    display:inline;
    float:left;
}
#header #searchbox #searchbox
{
    display:inline;
    float:left;
}
#header #searchbox #searchbutton 
{
    display:inline;
    float:left;

}

到

#header
{
    float:left;
    width:400px;
    padding:5px 0px 0px 0px;
}
#searchinput, #searchbox, #searchbutton, #searchboxbutton
{
    display:inline;
    float:left;
}

Answer 4

您在CSS（#searchinput）中有一个基于ID的选择器，但您正在使用标记中的类（<div class="searchinput">）。改变其中任何一个都应该有效。

第三，您不需要display:inline。只需float: left即可。此外，浮动元素需要具有宽度。所以设置一个宽度。

Answer 5

只需将此CSS添加到您的CSS样式表中即可：

.searchinput{
 display:inline-block
}

它将在一行中添加您的内容。

html按钮呈现在输入框下方

5 个答案: