4

ブラウザウィンドウのサイズを変更すると、この小さな素敵なメニューが折り返されるという事実に不満を感じています。ウィンドウのサイズが変更されているかどうかに関係なく、どのようにして折り返しを防ぎ、固定状態のままにすることができますか？

<!DOCTYPE html>
<html>

<head>
<style type="text/css">
#menu{

    border-top: 1px solid #FFF;
    padding:0;
    margin:0;
    position: fixed;
    top: 30px;
    left: 0px;
    font-size: 8pt;
    width:100%;
}
#menu ul{
    padding:0;
    margin:0;
}
#menu li{
    position: relative;
    float: left;
    list-style: none;
    margin: 0;
    padding:0;
    white-space: nowrap;
} 

#menu li a{
    width:120px;
    height: 20px;
    display: block;
    text-decoration:none;
    line-height: 20px;
    background-color: #A9BBD3;
    color: #FFF;
} 

#menu li a:hover{
    background-color: #446087;
} 
#menu ul ul {
    position: absolute;
    top: 21px;
    visibility: hidden;
}

#menu ul ul li a {
    width: 115px;
    padding-left: 5px;
}
#menu ul li:hover ul{
    visibility:visible;
}
#menu > ul > li > a {
    text-align:center;
}
#menu > ul > li > a:hover {
    border-bottom: 1px solid #FFF;
}

</style>
</head>
<body>
    <div id="menu">
    <ul>
    <li><a href="#nogo">File</a>
    <ul>
    <li><a href="#nogo">Save</a></li>
    <li><a href="#nogo">Save & Exit</a></li>
    <li><a href="#nogo">Exit</a></li>
    </ul>
    </li>
    <li><a href="#nogo">Edit</a>
    <ul>
    <li><a href="#nogo">Add</a></li>
    <li><a href="#nogo">Delete</a></li>
    <li><a href="#nogo">Clear Form</a></li>
    </ul>
    </li>
    <li><a href="#nogo">Reports</a>
    <ul>
    <li><a href="#nogo">Export to Excel</a></li>
    <li><a href="#nogo">Export to HTML</a></li>
    </ul>
    </li>
    </ul>
    <ul>
    </div>
</body>

</html>
4

3 に答える 3

18

次のCSSを追加します。

#menu > ul { 
    white-space: nowrap;
}

#menu > ul > li {
  display: inline-block;
  float: none;
  margin: 0 -3px 0 0;
}

float: noneルールをオーバーライドするために必要です#menu li { float: left; }。これにより、親ulのwhite-space: nowrapルールが無視されます。

display: inline-blockリストアイテムのインラインレイアウトを生成しますが、サイズ設定と配置に関してはブロック要素のように扱うことができます。

ネガティブmargin-rightは、HTMLソースの改行のデフォルトの単一スペースへの変換をオーバーライドするために必要です。これがないと、トップレベルのメニュー項目の間にスペースができます。

display: inline-blockIE7では正しく機能しません。修正はここで説明されています：

Internet Explorerの任意の要素でインラインブロックを機能させるには、「zoom：1; * display：inline; _height：30px;」を追加するだけです。その要素の最後にスタイルああ、はい、あなたが必要なものに高さを変更します。

于 2012-10-26T18:22:51.760 に答える
0

を設定width: 100%;しました<div id="menu">。これは、親の幅が100％になることを意味します。つまり、ブラウザウィンドウになります。

width: 35em;代わりに、この場合、要素の内容のサイズにほぼ等しい最小幅を適用します。テキストのサイズに基づく相対的な測定値は、テキストが大きいほど拡大縮小されますが、コンテンツが大きい場合は、テキストを大きくする必要があります。

于 2012-10-26T18:54:14.933 に答える
0

li { display:table-cell; }代わりに試してみてくださいfloat:left

于 2012-10-26T18:11:05.467 に答える