12

問題:

     **左部分** (#nav ul li) 浮かんでいる: 左
     および **右側の部分** (#nav .search) フロート: 右
            **一列に並んでいません**。

次のようになります。 ここに画像の説明を入力

しかし私の： ここに画像の説明を入力

HTML:

<div id="nav">
   <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">Portfolio</a></li>
     <li><a href="#">Blog</a></li>
     <li><a href="#">Contact</a></li>
   </ul>
   <div class="search">
     <input type="text" name="search" id="search" value="search">
   </div>

CSS:

#nav ul li{
float: left;
list-style: none;
margin: 0 20px;
}

#nav .search{
float: right;
}

私の解決策:

解決策 1 : 自分で行うのではなく、ブートストラップを使用してレイアウトを作成します。フッターで使用すると、完全に同じ行になります! でもまだ仕組みがわからない ここに画像の説明を入力

解決策 2 :検索ボックスを引き上げるためにmargin-top: -20pxを使用していますが、これは良い方法ではないと思います。

誰でも助けることができますか？どうもありがとう！

4

5 に答える 5

8

期待どおりに機能しない理由は<ul>、左側の が右側に拡張され、コンテンツが押し下げられているためです。解決策は、過去にこのシナリオに直面したときに私が行ったことである、左右の領域に明示的な固定幅を設定することです。しかし、フロートと絶対配置の組み合わせでさえ、最終的にはうまくいくと言います。

于 2013-01-23T02:54:53.390 に答える
4

絶対配置を使用し、左右の配置を使用する必要があります。

#nav ul, #nav .search {
    margin: 5px;
    position: absolute;
    display: inline-block;
}

ここをチェックしてくださいhttp://jsfiddle.net/A8SyJ

于 2013-01-23T03:08:07.930 に答える
0

ul には float:left を、検索ボックスには float: right を使用できます。

于 2013-01-23T10:20:57.490 に答える
0

検索をナビ内の別のリスト項目として追加し、それを右側に浮かせてみましたか?

<li class="search"><input type="text" name="search" id="search" value="search"></li>

以下の例を参照してください。

http://jsfiddle.net/teWP5/

于 2013-01-23T03:06:26.013 に答える