2

ウェブサイトの構築について質問があります。Web サイトのヘッダー部分には、同じ行にある必要がある 3 つの div が含まれています。左側に 1 つ、画面中央に 1 つ、右側に 1 つ。ヘッダー幅は 100% です。

#header {
background-color:#352618;
height: 100px;
width:100%;
}

および内部の 3 つの div:

#logo
{
float:left;
width:200px;
height:80px;
margin-top:6px;
margin-left:20px;
}

#Menu {
font-size:17px;
margin: 0 auto;
padding-top:20px;
width:100%; /** before it was 850 px **/
}

#LanguageSelect
{
float:right;
width:120px;
height:80px;
font-size:14px;
padding-top:60px;
padding-right:10px;
}

さて、質問は次のとおりです。メニュー部分はヘッダーのメニューであり、<li>ドロップ<ul>ダウンメニューです。コード：

   <div id="Menu" class="text_blue">
    <ul id="menu_noya">
        <li class="head_item">
            <a href="mine.html?search_engines">Women</a>
                <ul>
                    <li><a href="http://google.com/">Google</a>                         </li>
                    <li><a href="http://yahoo.com/">Yahoo</a>       </li>
                    <li><a href="http://live.com/">Live        Search</a></li>
                </ul>
        </li>
   </ul>
   </div>

その結果、ロゴは問題なく配置され、LanguageSelect は問題なく配置されていますが、メニューが画面の中央ではなく左側に固定されているのはなぜですか? <li>とを同じ行にするために、メニューを同じ行にできるように<ul>a を使用する必要があったためです。float:left

を使用せずに真ん中にするにはどうすればよいfloat:leftですか？

  • 別の質問: 私はこのフォントを使用しています: ヒラギノ明朝 Pro 、およびフォントが < 18px の場合。アンチアリスティングがないように、見た目が良くありません。

一般的にどのように見えるかの例を次に示します。 http://jsfiddle.net/GEKkf/

助けて読んでくれてありがとう！エルロイ。

4

3 に答える 3

2

次のクラスを追加します。

フィドル

#header {
    text-align: center;
}

#Menu {
    display: inline-block;
    font-size: 17px;
    padding-top: 20px;
}

また、これを行う別の方法については、こちらの回答を参照してください。

于 2013-07-15T16:19:15.537 に答える
0

CSS ファイルの li.head_item:hover ul エントリを次のように変更する必要があります。

li.head_item:hover ul { 
position: absolute;
 display: block; 
 width: 142px;
 background-color: #e9e9e9;
}
于 2013-07-15T16:39:23.987 に答える
0

3 つの div すべてfloat: left;を入れて、幅を 33% にします (または、必要に応じて 33% よりも少し低くします)。

clear:both;次に、ページの残りの部分を確実に押し下げるために after を持つ html 要素を追加します。必要に応じて、css を使用することもでき:afterます。

于 2013-07-15T14:38:32.917 に答える