インラインコンテンツでdivを作成するにはどうすればよいですか？

Question

http://i.imgur.com/37miZ.pngは、ここで私はそのようなh1は左側に座って、そのスタイルにしようとしていますスクリーンショット

で、入力が中央にあり、その後、私は右のいくつかのリンクを持っていると思います。

私はフロートを使ってみましたが、それはすべてを破壊します。編集

私はfloatを使用

は：左またはフロート：右、私は分離する2つのdivを取得するが、位置がひどいです。

私が持っている一部のHTML：あなたが何を意味するか

#container { 
    min-height: 100%; 
    position: relative; 
} 
#header { 
    background: #EDEDED; 
    height: 79px; 
    border-bottom: 1px solid #666; 
} 

#nytm{ 
    display: inline; 
} 

#form{ 
    margin-top: 24px; 
    display: inline; 
} 

#navlinks{ 
    display: inline; 
} 

Answer 1

方法は、その後、各を置きますフィールドを自分のdivにすると、これはその内部に等間隔のdivを持つ大きなdivを作成します。それでCSSを書く方が簡単です。

Answer 2

かなりわからないが、すべての新しいdiv要素がそう、ブロックレベル要素であることに注意してください：ここで

<div id="container"> 
      <div id="header"> 
       <div id="nytm"> 
        <h1>New York Tech Map</h1> 
       </div> 
       <div id="form"> 
        <form> 
         <input type="text" name="zip"> 
         <input type="submit" value="Search By Zip"> 
        </form> 
       </div> 
       <div id="navlinks"> 
       </div> 
      </div> 
</div> 

は、CSSですあなたがそれ以外のことを言わない限り、それ自身の行を取得します。あなたのフロートでdisplay：inlineを使ってみてください。このclearfixスタイルクラスを入れて、you'r CSSファイルで

：

Answer 3

[OK]を、この手順に従ってください

.clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;} 
    .clearfix{display:inline-block;} 
    html[xmlns] .clearfix{display:block;} 
    * html .clearfix{height:1%;} 

    .fr{float:right;display:inline-block;} 
    .fl{float:left;display:inline-block;} 

あなたは、次のセクションのために、このクラスが必要になります。

<div class="clearfix container"> 
     <div class="fl search-zone"> 
      <!-- YOUR SEARCH INPUT AND BUTTON HERE --> 
      <input type="text" /> <button>SEARCH</button> 
     </div> 
     <div class="fr links"> 
      <!-- YOUR LINKS HERE --> 
      <a href="">LINK 1</a> <a href="">LINK 2</a> <a href="">LINK 3</a> 
     </div> 
    </div> 

• clearfixクラスは任意の浮動要素、その中にあなたの位置を助ける、それはそのためのクロスブラウザのソリューションです：

  今の私たちはHTMLセクションで必要なものを見てみましょう。 * IEの問題を防ぐために、search-zoneとlinksをに与えることを強くお勧めします。

これはあなたが探しているものです。

Answer 4

浮動小数点を使用しているときにその位置がひどい理由をここで確認してください。私はCSSを調整し、出力を参照してください

http://jsfiddle.net/Bq9eq/ 

Answer 5

私はあなたがあなたのヘッダーの列が欲しいと思います。

これを実行する1つの方法は、3つの別々のdivを作成することです。

<div class="top-container"></div> 
<div class="top-container"></div> 
<div class="top-container"></div> 

Clearfixコンテナと子どもたちに

#header .top-container{ 
    width:33%; 
    float:left; 
} 

チェック完全なコードについては、このフィドルフロート：私はこれが最初の一つの大きなのdivを作成されるだろうhttp://jsfiddle.net/xZC3G/2/