2

私はまだCSS全般に​​少し慣れていないので、優しくしてください。divを一覧表示する基本的な順序付けされていない水平リストを作成しようとしています（これはナビゲーションバーとして使用されるため、後で背景画像が提供されます）。どういうわけか、表示できないようです。IE8がそのブラウザーで機能するかどうかを判断したので、IE8に対してテストしています。すべてのブラウザーで機能します（終了に近づいたら、他のブラウザーでテストします。約束します）。

使ってます<!DOCTYPE html>

CSS

#nav_list {
list-style-type:none;
margin:0;
padding:0;
margin:auto;}

.list{display:inline;}

.nav_option {margin:auto; border:solid black 1px; width:50px;}

HTML

<div id="nav">
<ul id="nav_list">
    <li class="list Home"><div class="nav_option Home">Home </div></li>
    <li class="list Shop"><div class="nav_option Shop"> Shop</div></li>
    <li class="list Game"><div class="nav_option Game">Game </div></li>
    <li class="list Map"><div class="nav_option Map">Map</div></li>
    <li class="list Information"><div class="nav_option Information">Information</div></li>
    </ul>
</div>

どういうわけか、IEに境界線を配置させることすらできませんが、インラインにすることはできません。私は何を台無しにしていますか？

4

3 に答える 3

1

あなたはあなたのdivをフロートさせる必要があります。

.nav_option {margin:auto; border:solid black 1px; width:50px; float:left}
于 2012-07-24T19:53:14.167 に答える
0

7番目が正しいです。これらの余分な要素が本当に必要かどうかを考えてみてください。

ただし、質問はインライン要素を含むスタイリングリストに関するものだったので、これを行うためのちょっとしたことを以下に示します: http://dabblet.com/gist/3172553 css は最新のブラウザーには適している可能性がありますが、IE8 (およびおそらく IE7) が要件であるためです。 、nth-childセレクターを省略し、最初と最後の要素に別のクラスを使用して、余分なスタイルを追加しました。

#nav_list, nav {
    display: block;
}

#nav_list li {
    display: inline-block;
    border: 1px solid black;
    margin-right: -1px;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

#nav_list li.last {
    margin: 0;
}

インライン要素を使用する場合、改行はスペースとしてカウントされ、表示されることを忘れないでください。したがって、リストの html はすべて 1 行である必要があります。

<nav>
  <ul id="nav_list">
    <li id="home" class="first">Home</li><li id="shop"> Shop</li><li id="game">Game</li><li id="map">Map</li><li id="info" class="last">Information</li>
  </ul>
</nav>
于 2012-07-24T20:49:48.163 に答える
0

@Signify、私がすることは、「インライン」を表示する代わりに、li 要素または「リスト」をフロートすることです。または、Ed Charbeneau が言ったように .nav_option をフロートすることもできます。また、始めたばかりなので、class="list Home" を設定すると、実際にはその li 項目に 2 つのクラスが設定されていることがわかりますか? class="nav_option Home" を使用する場合も同じです。両方のクラスを使用するには、CSS で両方のクラスを使用するには、次のようにします。

li.list.ホーム

これは便利な場合もありますが、繰り返しになりますが、まだ始めたばかりなので、両方が必要になるとは思えません。各リスト項目内の div についても同じです。

したがって、物事を単純化して、次のようなものを使用できると思います。

<nav>
    <ul>
        <li class="home">Home</li>
        <li class="shop">Shop</li>
        <li class="game">Game</li>
        <li class="map">Map</li>
        <li class="info">Information</li>
    </ul>
</nav>

本当に必要な場合にのみ、タグとクラスを追加してください。タグ、HTML5 タグを使用していることに注意してください。それが整っていれば、できることはすでにたくさんあります。レイアウトや古いブラウザーをどれだけ気にかけているかによっては、これらすべてのクラスが必要ない場合もあります。li:nth-child(1)、li:nth-child(2) などを使用して、css でそれらのそれぞれを「指す」ことができます...まあ、はるかに多くのオプションがあります...すべて依存しますあなたが達成したいことの。

そして最後にもう一度言いますが、これらすべてのクラス (さらには要素) が必要になるとは思えません。

于 2012-07-24T20:00:57.567 に答える