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

あなたのロゴは、メニューと検索ボックスの上に置くべきだと思います。それを考えると、ロゴを 内に配置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/

于 2013-10-24T02:22:54.717 に答える