Выровнять теги <input>& <button>

Question

У меня есть упорядоченный список, в котором есть поля <input type="text"... и <button>.Когда я отображаю их, я получаю поля в 2 отдельные строки.Как заставить их входить в одну строку?

HTML-

<li>
    <input type="text" value="Paste URL here"></input>
    <button id="i">Go</button>
</li>

Я даже удалил их из <li> и поместил их в отдельный <div>, но безуспешно,Какой CSS нужно добавить сюда, чтобы преодолеть это поведение по умолчанию?

ОБНОВЛЕНИЕ: Я удалил эти 2 тега из упорядоченного списка и поместил их в <div>.Теперь это выглядит так -

<div style="display: inline-block">
    <input id="url" type="text" value="Paste URL here"></input>
    <button id="i" style="font-size:10px; margin:2px;">Go</button>
</div>

Не влияет на попытки float:left; или display:inline-block.

Answer 1

<div style="width: 100%;">
    <input type="text" style="float: left; width: 200px;" id="url" value="Paste URL here">
    <button style="font-size: 10px; margin: 2px; float: left;" id="i">Go</button>
</div>

Answer 2

Кнопка отправки, похоже, имеет разные значения полей и отступов по умолчанию в разных браузерах.

Я предполагаю, что это должно быть в некоторые сбрасывают таблицу стилей , так как это не единственный раздражающий кросс-браузер "по умолчанию«Расхождение ценностей.Когда сеть стандартизируется, это другая тема.

Вот как мы это делаем:

#searchForm {
    position: relative;   // you must keep this
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 30px;
}
input#searchEntry {
    padding: 0;    // you must keep this
    margin: 0;     // you must keep this
    margin-top: 3px;
    width: 198px;
    font: 17px Arial,Helvetica,sans-serif;
}
input#searchBtn{
    padding: 0;   // you must keep this
    margin: 0;    // you must keep this
    position: absolute;   // you must keep this
    left: 203px;
    top: 2px;
    height: 24px;
    width: 42px;
    font-size: 14px;
    background: url(http://yourDomain/img/yourPrettySearchIcon.png) buttonface no-repeat 9px 1px;
    cursor:pointer;
    cursor:hand;
}


<form id="searchForm" name="mySearchForm" action="myPage.html" method="post">
    <input name="searchEntry" value="" id="searchEntry" type="text"/>
    <input name="searchBtn" value="" id="searchBtn" type="submit"/>
</form>

Я заметил очень небольшие расхождения между IE8, Firefox и GChrome, но они могут быть вдругие браузеры.

Форма здесь имеет свою позицию, установленную на «относительный», так что, когда я устанавливаю абсолютную позицию кнопки, сама кнопка позиционируется относительно searchForm.

Answer 3

Должно быть в одной строке.

Проверьте ширину родительского тега <li> and <li> (<ul> или что-то в этом роде).Я думаю, что это может вызвать это.