2

幅 940 ピクセルの小さな個人用 Web サイトに取り組んでいます。ウェブサイトの幅いっぱいの 6 つの要素を持つメニューを構築したいと考えていました。Firefox、Chrome、Opera ではメニューを完璧にすることができましたが、IE では最後の要素の最後に少し (4 ～ 5 ピクセル) の隙間があります。そのスペースを削除するにはどうすればよいですか？

メニューの CSS は次のとおりです。

#menu ul {
     list-style: none;
     width: 100%;
}

#menu li {
    display: inline-block;
    *display: inline;
    text-align: center;
    padding: 30px 0 30px 0;
}

#menu a {
    text-decoration: none;
    font-size: 16px;
    border-right: 1px solid #C1BEBA;
    padding: 10px 56px 10px 56px;
}

とHTML

<ul id="menu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    <li><a href="#">Menu 6</a></li>
</ul>

ライブデモ

4

1 に答える 1

0

コードと計画にはいくつかの問題があります。

  1. 本当に決定する必要があります: メニュー項目の間にスペースが必要ですか。そうでなく、それらを互いに接触させ、幅 940 ピクセルのページの側面に接触させたい場合は、940/6=156.666 が繰り返されるため、現在の計画は機能しません。これはピクセルパーフェクトではなく、見栄えが悪くなります。メニュー項目間にスペースが必要な場合は、すべてのメニュー項目の幅を設定する必要があります。パディングだけだと、文字が多すぎたり少なすぎたりした瞬間にページのレイアウトが崩れたり、CSSを多用しないと不揃いになったりします。

  2. #menu ul. ul#menu である必要があります。これが、コードの一部が機能していなかった理由です。

  3. 他のブラウザーと同じように表示するには、IE 用の CSS リセットを使用する必要があります。以下のコードでは単純なリセットを使用しましたが、Google IE CSS リセットをお勧めし、最も適切なものを選択してください。

  4. これが私がまとめたサンプルコードです。私はあなたのものをかなり変更しましたが、うまくいけばそれは役に立ちます。li タグには右余白を追加し、次に a タグには負の余白を追加して、テキストが境界線の間で適切に中央に配置されるようにしました。メニュー項目の背景色を変更したい場合は、CSS の幅とマージンを計算するだけで済みます。

このコードの完全な例は、http: //code.bengrunfeld.com/iewithhorizo​​ntalmenu.htmlで確認できます。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

body {
    background:#aaa;
    width:940px;
}

ul#menu {
    background:#fff;
    list-style: none;
    width:940px;
    height:80px;    
}

#menu li {
    width:145px;
    display:inline-block;       
    padding: 30px 0;
    margin-right:13px;
    float:left;
    border-right: 1px solid #C1BEBA;
}

#last {
    margin-right:0px !important;
    border-right:none !important;
}

#menu a {
    width:158px;
    text-decoration: none;
    font-size: 16px;
    text-align:center;
    margin-left:-13px;  
    display:block;
}

<ul id="menu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    <li id="last"><a href="#">Menu 6</a></li>
</ul>
于 2012-11-11T04:21:02.273 に答える