1

目標:メニュー項目が互いに同じ量のスペースを占めるようにしたいと考えています。表示スペースを広げるとき、メニュー項目が独自の行に折りたたまれるのは望ましくありません。むしろ、どんどん近づいてほしい。

試行 1:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
</head>

<style>
    #container{
        width: 100%;
    }


    #navigation{
        width: 100%;
        background: #333;
        display: table;
    }
    #navigation ul{
        margin:0px auto;
        padding: 0 0 0 0;
        display: table-row;

    }
    #navigation li{
        list-style-type: none;
        display: inline;
        display: table-cell;
    }
    #navigation li a{
        float: left;
        /*padding: 5px 10.2%;*/
        padding: 5px;
        color: #FFFFFF;
        text-decoration: none;
        text-align: center;
    }
    #navigation li a:hover{ 
        background: #1C5EC2; 
    }
</style>

</head>
<body>
    <div id="container">
        <div id="navigation">
            <ul>
                <li><a href="#" alt="Home"        >Home</a>        </li>
                <li><a href="#" alt="Games"       >Games</a>       </li>
                <li><a href="#" alt="High Scores" >High Scores</a> </li>
                <li><a href="#" alt="Contact Us"  >Contact Us</a>  </li>
            </ul>
        </div>
    </div>
</body>
</html>

これらのアイテムはすべて水平に並んでいますが、等間隔ではありません。また、それらを強調表示しても、私が望むほど広い領域を陰影付けすることはできません。

試行 2:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
</head>

<style>
    #container{
        width: 100%;
    }


    #navigation{
        float: left;
        width: 100%;
        background: #333;
    }
    #navigation ul{
        margin: 0;
        padding: 0;
    }
    #navigation ul li{
        list-style-type: none;
        display: inline;
    }
    #navigation li a{
        display: inline;
        float: left;
        padding: 5px 10.3%;
        color: #FFFFFF;
        text-decoration: none;
    }
    #navigation li a:hover { background: #1C5EC2; }
</style>

</head>
<body>
    <div id="container">
        <div id="navigation">
            <ul>
                <li><a href="#" alt="Home"        >Home</a>        </li>
                <li><a href="#" alt="Games"       >Games</a>       </li>
                <li><a href="#" alt="High Scores" >High Scores</a> </li>
                <li><a href="#" alt="Contact Us"  >Contact Us</a>  </li>
            </ul>
        </div>
    </div>
</body>
</html>

この例は、私が望むものとほぼ同じです。これについてはすべて正しいですが、表示サイズを小さくすると、メニュー項目が他の項目の下の行に表示されます。

最初の試行の非ラッピング動作を取得して、2 回目の試行に適用するにはどうすればよいですか? 私の目標は、メニュー項目をラップしない 2 回目の試行を実装することです。

*注: 別の CSS ファイルと html が関係していますが、問題に必要と思われるものだけを含めました。ありがとうございました。

4

2 に答える 2

3

ここで - 私はフィドルを作りました。これはあなたが探しているものですか？ リンク

あなたliとa要素のCSSを変更しました：

#navigation ul li {

    list-style-type: none;
    float: left;
    width: 25%;    
    text-align: center;
}


#navigation li a {

    color: #FFFFFF;
    text-decoration: none;
    padding: 5px 0px;
    display: block;    
}
于 2012-11-05T18:34:26.010 に答える
1

oksushiのおかげで、これは幅を設定する必要がなく、最後に余分なスペースがなくても実行できます。

http://jsfiddle.net/VBcUM/

HTML

<ul>
  <li><a href="#">Lorem ipsum</a></li>
  <li><a href="#">Dolor</a></li>
  <li><a href="#">Sit</a></li>
  <li><a href="#">Amet</a></li>
  <li><a href="#">Consectetur</a></li>
  <li><a href="#">Adipiscing</a></li>
</ul>

CSS

ul {
  padding: 0;
  display: table;
  width: 100%;
  table-layout: fixed;
}
li {
  display: table-cell;
}
a {
  display: block;
  padding: 1em;
  text-align: center;
  background: white;
}
a:hover {
  background: lime;
}
于 2013-07-31T05:05:02.427 に答える