HTML - мне нужны Button, Label и TextBox с этим последним AUTO RESIZE в ширину при изменении размера браузера

Question

Я хочу иметь элемент поиска, где у меня есть:
1) Кнопка
2) Метка
3) Текстовое поле

МОЯ ЦЕЛЬ:
Поле редактирования должно автоматически изменить размер до МАКСИМАЛЬНОЙ по умолчанию, и всякий раз, когда я физически изменяю размер страницы браузера, не перемещаясь вниз !!!

Я даже не уверен, что вы захотите использовать DIV , но вот что я попробовал (и не смог):

<div id="search">    
   <div id="searchbtn">
      <input id="btnSeach" type="button" value="Search" /> 
      Search:  
   </div>
   <div id="searchtxt">
       <input id="txtSearch" name="txtSearch" type="text" value="" /> 
    </div>
</div>

CSS выглядит следующим образом:

div#search
{
   height: 30px;
   border: 1px solid #80808D;
   padding: 5px 0px 5px 0px;
}

div#searchbtn
{
   float: left;
   display: inline;
   padding: 0px 10px 0px 10px;
}

div#searchtxt
{
   float: left;
   width: auto;
   display: inline;
   padding-right: 10px;
}

Я надеялся, что width: auto означает, что div автоматически расширится (rsss).

Я попытался поместить ширину90% для TextBox, но он никогда не работает хорошо при изменении размера.
Я попытался поместить некоторую ширину в div searchtxt , но снова не работал должным образом при изменении размера.

Если использование div - это путь вперед, что будет правильным CSS для различных DIV?
Если это НЕ так ... тогдакакой другой способ будет работать лучше?

Спасибо.

Answer 1

Используя некоторые display: хитрости ...

Live Demo (протестировано только в FireFox 3.6.x)

<style type="text/css">
div#search {
   border: 1px solid #80808D;
   display: table;
   height: 30px;
   padding: 5px 0px 5px 0px;
}

div#searchbtn {
   padding: 0px 10px 0px 10px;
   white-space: nowrap;
}

div#searchtxt {
   display: table-cell;
   padding-right: 10px;
   width: 100%;
}
input#txtSearch {
   width: 100%;
}
</style>

<div id="search">
   <div id="searchbtn">
      <input id="btnSeach" type="button" value="Search" />
      Search:
   </div>
   <div id="searchtxt">
       <input id="txtSearch" name="txtSearch" type="text" value="" />
    </div>
</div>

Примечание : Internet Explorer 8 (и выше) поддерживает значения свойств "inline-table", "run-in", "table" , "table-caption", "таблица-ячейка" , "таблица-столбец", "таблица-столбец-группа", "таблица-строка", "таблица-строка-группа" и "наследовать", только если! DOCTYPE имеет значениеуказано.

Answer 2

Вы пытались добавить min-width +% width в div, а затем добавить width:100% к входу?

http://jsfiddle.net/jordanlewis/HtevS/

Answer 3

Хорошо, я нашел другой метод, который бы держал все в одной строке:

http://jsfiddle.net/jordanlewis/jtNEa/

HTML

<div id="search">
    <input id="btnSeach" type="button" value="Search" />
   <label for="txtSearch">Search</label>
   <input type="text"  name="txtSearch" id="txtSearch" />

CSS

#search {
    display:table;
    width: 100%;
}

label {
    padding-right:10px;
}

input {
  display:table-cell;
  width:95%;
}

label {
    display:table-cell;
    width:10px ; 
}

Answer 4

Если вы используете CSS, вы можете использовать отступы влево и вправо, чтобы он расширялся.