2

ヘッダーdivで、2つのオブジェクトを右にフロートさせる必要があります。1つはボタンで、もう1つは検索フィールドです。

どちらも「プルライト」と呼ばれるdivにあり、正しくフロートさせます。

オブジェクトはこれらの順序（左から右）にあります

検索ボックスボタン

ただし、どちらも明らかに右に浮いているため、コードの最初の要素が勝ち、右側にスポットを当てます。

そのため、実際には検索ボックスが最初に表示されますが、ボタンを検索ボックスの前に配置しました。しかし、それはまだ機能しています。

それを行うためのずさんな方法と見なされますか？

HTMLは次のとおりです。

<div id="navbar">
  <div id="navbar-inner" class="clearfix">
    <div class="pull-right">
      <a href="#" class="btn lightgrey">Sign in</a>
   </div>

   <div class="pull-right">
     <form><input type="search" id="search" placeholder="Search"></form>
   </div>
  </div>
  </div>

およびCSS：

.pull-right { 
    float: right; 
}
4

1 に答える 1

1

これを別のコンテナに簡単にラップして、それを右にフロートさせることができます。

HTML:

<div id="floatingContainer">
    <input type="text" value="Input" />
    <input type="submit" value="submit" />
</div>​

CSS:

#floatingContainer { float:right; }​

JSFiddle の例。

于 2012-11-19T12:31:02.157 に答える