0

このJSFiddleで、searchdiv が中央揃えになっていることがわかります。どうすれば上に揃えることができますか?

HTML:

<div id="wrapper">
    <div id="banner">
        <a href="#"><h1>Title</h2><br />
        <h2>Subtitle</h2></a>
        <div id="search">
            <label>Search</label>
            <input type="textbox"/>
            <input type="submit" />
            <img src="images/logo.png" alt="logo"/>
        </div>
</div>

CSS:

#wrapper{
    width:85%;
    margin:35px auto;
}

#banner{
    height:150px;
    padding:30px;
    padding-bottom:5px;
}
#search{
    float:right;
    display:inline;
    width:38%;
}

#banner h1, #banner h2{
margin:0;padding:0;color:#A2A2A2;display:inline;
}
#banner h1{
font-size:50px;
}
#banner h2{
font-size:35px;
}
4

1 に答える 1

1

少なくとも 2 つのオプションがあります。div検索を右にフロートさせたい場合は、htmlコード内で上に移動します。これで、検索 divは、コード内のその後にある要素に直接移動します。(元のコードには閉じられていない div があることに注意してください。)

フィドルを見る

<div id="wrapper">
  <div id="banner">
    <div id="search">
      <label>Search</label>
      <input type="textbox"/>
      <input type="submit" />
      <img src="images/logo.png" alt="logo"/>
    </div>
    <a class="" href="#"><h1>Title</h2><br />
    <h2 class="">Subtitle</h2></a>
  </div>
</div>

他のオプションは、前の要素 (aおよびh2) を検索の左側にフロートさせることですが、検索がブラウザー ウィンドウの右端にないdivため、見栄えがよくありません。div

于 2013-04-11T19:36:55.263 に答える