Question

我在尝试对齐此输入字段时遇到了一些麻烦。这是截图

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
}

我尝试过添加行高，但这似乎不正确。容器的高度为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>

Answer 1

我认为您的徽标应位于菜单和搜索框上方。鉴于此，我建议在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/

尝试对齐输入字段

1 个答案: