HTML-кнопка рендеринга ниже поля ввода

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="" /> также соответствует этому стилю (ширина: 400 пикселей):

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

Идентификаторы должны быть уникальными - измените их или содержащий элемент и напишите ваши стили соответственно.

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

141: идентификатор X уже определен

An "id" is a unique identifier. Each time this attribute is used in a

документ должен иметь другой значение. Если вы используете этот атрибут в качестве крючка для таблиц стилей это может быть более целесообразно использовать классы (которые элементы группы) чем ID (которые являются используется для идентификации только одного элемента).

Answer 3

У вас есть селектор на основе идентификатора в CSS (#searchinput), но вы используете классы в разметке (<div class="searchinput">). Измените любой из них, и он должен работать.

В-третьих, вам не нужно display:inline. Просто float: left подойдет. Кроме того, плавающие элементы должны иметь ширину. Так что установите ширину.

Answer 4

Возможно, потому что ваша ширина #searchbox составляет 400 пикселей, а ваш тег ввода и тег кнопки больше 400 пикселей.

Попробуйте увеличить ширину #searchbox до 600 пикселей и посмотреть, что получится.

Измените свой 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;
}