Попытка выровнять поле ввода

Question

Попытка выровнять поле ввода

0

У меня возникли проблемы с выравниванием этого поля ввода. Вот скриншот

http://i255.photobucket.com/albums/hh140/testament1234/input_zps68391b01.png

Вот мой HTML -

<div class="four columns search_box">
   <form>
       <input type="text" placeholder="SEARCH"/>
   </form>
</div>

CSS -

.search_box input{
display:block;
vertical-align:middle
}

Я попытался добавить высоту строки, но это кажется неправильным. Высота контейнера - 90 пикселей

Вот разметка заголовка

<div class="container">
<header>

<div class="twelve columns">

   <h1 ><a class="logo" href="#" title="My Phone">my | phone</a></h1>
       <ul class="menu">
           <li><a href="#">press</a></li>
           <li><a href="#">downloads</a></li>
           <li class="noborder"><a href="#"><span>stores</span></a></li>
       </ul>
</div>

<!--SEARCH BOX -->
<div class="four columns search_box">
   <form>
       <input type="text" placeholder="SEARCH"/>
   </form>
</div>

</header>
</div>

clestcruz 24 окт. 2013, в 04:37

Источник

0

Вы пытаетесь выровнять окно поиска с меню? Вы используете Zurb Foundation? Если это так, было бы хорошо, чтобы увидеть HTML-код для меню тоже
davidpauljunior 24 окт. 2013, в 01:57
0

@clestcruz где они должны быть выровнены? Пресса | Скачать | магазины? У обоих (Press | Download | Stores) и search_box один и тот же родительский div?
Gary Tsui 24 окт. 2013, в 01:59
0

Да, я хочу, чтобы он правильно совмещался с меню. Я использую только каркасные рамки
clestcruz 24 окт. 2013, в 01:59

Показать ещё 1 комментарий

Теги:

html

css

input

layout

1 ответ

Ещё вопросы

Вы пытаетесь выровнять окно поиска с меню? Вы используете Zurb Foundation? Если это так, было бы хорошо, чтобы увидеть HTML-код для меню тоже
@clestcruz где они должны быть выровнены? Пресса | Скачать | магазины? У обоих (Press | Download | Stores) и search_box один и тот же родительский div?
Да, я хочу, чтобы он правильно совмещался с меню. Я использую только каркасные рамки

davidpauljunior · Answer 1 · 2013-10-24T00-34-00.000Z

Я предполагаю, что ваш логотип должен сидеть над меню и в окне поиска. Учитывая это, я предлагаю иметь логотип внутри div class="sixteen columns" а затем иметь меню внутри <div class="twelve columns"> чтобы он соответствовал сетке рядом с <div class="four columns"> в следующей строке. Как это:

<div class="container">
    <header>

        <!--LOGO-->
        <div class="sixteen columns">
            <h1 ><a class="logo" href="#" title="My Phone">my | phone</a></h1>
        </div>

        <!--NAVIGATION -->
        <div class="twelve columns">
            <ul class="menu">
                <li><a href="#">press</a></li>
                <li><a href="#">downloads</a></li>
                <li class="noborder"><a href="#"><span>stores</span></a></li>
            </ul>
        </div>

        <!--SEARCH BOX -->
        <div class="four columns search_box">
            <form>
                <input type="text" placeholder="SEARCH"/>
            </form>
        </div>

    </header>
</div>

Затем он просто настраивает CSS, чтобы выровнять текст меню с текстом поиска.

Я поставил его в скрипку: http://jsfiddle.net/davidpauljunior/YR7Em/