2

http://i.imgur.com/37miZ.pngここにスクリーンショットがあります

h1が左側にあり、入力が中央にあるようにスタイルを設定しようとしています。次に、右側にいくつかのリンクを配置したいと思います。

フロートを使ってみましたが、すべてが台無しになってしまいました。

編集

float：leftまたはfloat：rightを使用した場合、2つのdivを分離できますが、ポジショニングがひどいです。

私が持っているいくつかのhtml：

<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です：

#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;
}
4

5 に答える 5

2

OK、次の手順に従います。

あなたのcssファイルに、このclearfixスタイルのクラスを入れてください：

    .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;}

次のセクションでこのクラスが必要になります。

HTML次に、このセクションで必要なものを見てみましょう。

    <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クラスは、フローティング要素をその中に配置するのに役立ち、そのためのクロスブラウザーソリューションです。* IEの問題を防ぐために、クラスsearch-zoneに与えることを強くお勧めします。linkswidth

これがあなたが探しているものであることを願っています。

于 2012-04-14T00:47:28.580 に答える
1

ここでそれをチェックしてください、なぜフローティングを使用している間彼らのポジショニングがひどいのですか？cssを調整して出力を確認します

http://jsfiddle.net/Bq9eq/
于 2012-04-14T00:50:37.423 に答える
0

私はあなたが意味するのはあなたがあなたのヘッダーにそこに列が欲しいという3つだと思います。

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

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

コンテナをクリアフィックスし、子をフロートさせます

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

完全なコードについては、このフィドルを確認してください：http: //jsfiddle.net/xZC3G/2/

于 2012-04-14T00:55:05.230 に答える
0

これを行う方法は、最初に1つの大きなdivを作成し、次に各フィールドを独自のdivに配置することです。これにより、内部に等間隔のdivを持つ大きなdivが作成され、CSSを実行する方が簡単になります。

于 2012-04-15T21:01:13.673 に答える
-1

意味はよくわかりませんが、新しいdivはすべてブロックレベルの要素であるため、特に指定しない限り、独自の行を取得することに注意してください。フロートでdisplay：inlineを使用してみてください。

于 2012-04-14T00:37:03.713 に答える