-1

ナビゲーション要素の配置に問題があります。

CSS：

#wrapper { width: 600px; margin: 0 auto; height: 300px; background: #f9f9f9; border: 1px solid #f0f0f0; }
#navigation { margin: 0 auto; text-align: center; }
.mylink { background: #666; color: #ccc; padding: 5px 10px; display: inline-block; }
.mylink:first-child { -webkit-border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; border-top-left-radius: 10px; }
.mylink:last-child { -webkit-border-top-right-radius: 10px; -moz-border-radius-topright: 10px; border-top-right-radius: 10px; }

HTML：

<div id="wrapper">
    <div id="navigation">
        <a class="mylink">Homepage</a>
        <a class="mylink">Second Page</a>
        <a class="mylink">Third Page</a>
    </div>
</div>

インライン要素の余白を削除したい。「float：left」バリエーションも試してみました。しかし、幅の値がないと要素を中央に配置できません。

どのように私はそれを解決することができますか？

4

2 に答える 2

2

これは「インラインブロック」の一般的な問題です。マージンではなく、実際のスペース文字を扱っています。

これは役立つはずです：http：//css-tricks.com/fighting-the-space-between-inline-block-elements/

于 2012-10-07T10:11:48.347 に答える
1

余白はありません。インライン要素は空白（スペース、タブ、改行、その他の非表示の区切り文字）を考慮に入れ、ブロック表示とフロートを使用するか、空白なしで入力して、フィドルを更新しますhttp：// jsfiddle.net/Rnmbx/1/

于 2012-10-07T10:14:02.367 に答える