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
}

我尝试添加 line-height 但这似乎不正确。容器高度为 90px

这是标题的标记

<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>
4

1 回答 1

0

我认为您的徽标应该位于菜单和搜索框上方。鉴于此，我建议将徽标放在 adiv class="sixteen columns"中，然后将菜单放在 a 中<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/

于 2013-10-24T02:22:54.717 回答