CSS：自動幅を持つ要素の背景色

Question

問題のドメイン。 CSSを使ってHTMLリストをスタイルしたいと思います。リストはナビゲーションバーとして機能し、常に画面上に表示されます。画面のスペースを無駄にするのを避けるために、メニューはデフォルトで折りたたまれた状態になり、マウスオーバー時にのみ展開されます。

予想される動作。 ホバリングオーバーでない場合、ナビゲーションにはリストの番号が表示されます。ユーザーが1つのリスト項目を移動すると、その項目のテキストが表示されます。ナビゲーションバーの背景色は、そのテキストの末尾に表示されますが、上に表示されている項目の周囲にのみ表示されます。つまり、アイテムはナビゲーションの「飛び出す」必要があります。

実際の動作。このシナリオで背景色を使用する方法が見つかりません。リスト項目の幅がautoに設定されている場合、テキストは必要に応じて表示されますが、背景色はリスト項目では拡張されません。リストアイテムの固定幅を設定した場合（フィドルでは33フィート）、 300pxの場合、背景色はになりますが、静的なサイズは避けてください。なぜ静的な幅は自動的なものと違うのですか？

私はのホバーオーバーリスト項目の固定配置を試みました。それは私が気づいている効果を生むだろうが、それはまた、2つの望ましくない副作用を持っている：それは、選択された項目から自動番号付けを削除し、テキストフローから項目を取り除く。 。両方とも手動で補償する必要があります。これは避けたいものです。

JSFiddleとコード このバイオリンは、問題を示していますhttps://jsfiddle.net/3n8g03y9/

body { 
 
    /* For better visibility of white text */ 
 
    background-color: #002; 
 
} 
 

 

 
/* Container div */ 
 

 
#navigation { 
 
    position: fixed; 
 
    font-size: 20pt; 
 
    display: block; 
 
    background-color: #333; 
 
    /* dark grey */ 
 
} 
 

 

 
/* Main topic list */ 
 

 
#navigation>ol { 
 
    box-sizing: border-box; 
 
    list-style-position: inside; 
 
    padding-left: 10px; 
 
    width: 40px; 
 
} 
 

 

 
/* Main topic entry */ 
 

 
#navigation>ol>li { 
 
    white-space: nowrap; 
 
    background-color: #333; 
 
    #333; 
 
    /* dark grey */ 
 
    color: white; 
 
    overflow: hidden; 
 
    /* Only show the number until hover */ 
 
    width: 30px; 
 
    /* 40px minus the OL’s padding */ 
 
} 
 

 

 
/* Hover over main topic entry */ 
 

 
#navigation>ol>li:hover { 
 
    width: auto; 
 
    overflow: visible; 
 
    ; 
 
}

<div id="navigation"> 
 
    <ol> 
 
    <li> Topic 1</li> 
 
    <li> Topic 2</li> 
 
    <li> Topic 3</li> 
 
    <li> Topic 4</li> 
 
    </ol> 
 
</div>

Answer 1

簡単な答えはこのように、フロートにあなたのli要素を設定し使用することです：

/* Main topic entry */ 
    #navigation > ol > li{ 
    white-space: nowrap; 
    float: left; /* Add this to show background when hovering */ 
    background-color: #333; /* dark grey */ 
    color: white; 
    overflow: hidden; /* Only show the number until hover */ 
    width: 30px; /* 40px minus the OL’s padding */ 

このペンをチェックするデモ用：http://codepen.io/MikkelTN/pen/XMoxEa