как разместить div рядом с центрированным div css

Question

У меня есть страница поиска, которая содержит текстовое поле для поиска и ссылку с надписью «расширенный поиск», похожую на Google.

У меня проблемы с центрированием текстового поля и с «Расширенным поиском» справа от текстового поля.

В основном я хочу, чтобы макет выглядел как googles http://www.google.com/'>See здесь

Это был мой выстрел:

            <div style="width:650px; margin-right:auto; margin-left:auto;">
                <%= Html.TextBox("SearchBar")%>
            </div>
            <div style="width:90px; float:right;">                    
                <a href="#" style="text-decoration:none">Advanced Search</a>
            </div>

Answer 1

Google использует таблицу для отображения окна поиска. Левый и правый столбцы имеют ширину 25%, а центральный столбец имеет ширину 50%. Поле поиска находится в центральном столбце, а «Расширенный поиск» - в правом столбце. Левый столбец пуст.

Тогда просто отцентрируйте стол. Окно поиска будет отцентрировано, а справа появится «Расширенный поиск».

Answer 2

Вы можете попробовать использовать div-обертку с 90px на каждой стороне и автоматическим отступом.IE

<div class="wrapper">
    <div class="side"></div>
    <div class="textbox"><input type="text" id="myinput"></div>
    <div class="side"></div>
</div>

Answer 3

Не будучи CSS-пуристом, я бы тоже пошел по пути таблицы, так как я мог бы сделать это гораздо быстрее, чем пытаться вывести плавающие DIV-ы для правильного выравнивания.и соответствующего размера, чтобы выполнить то же самое.

<div style="width: 25%; float: left;">Your content here.</div>
<div style="width: 50%; float: left;">Your content here.</div>
<div style="width: 25%; float: left;">Your content here.</div>

Answer 4

Вы можете установить стиль для текстового поля, если применить что-то вроде этого:

style="position absolute;top:80px;left:90px;" 

вы явно указываете, где вы хотите, чтобы текстовое поле отображалось, поэтому вы указываете пиксели, и оно должно быть внутри слоя ... оно должно работать для вас

input name="q" class="textbox" tabindex="1" onfocus="if (this.value=='search') this.value = ''" type="text" maxlength="80" size="28" value="search" style="position absolute;top:80px;left:90px">