Question

问题域。 我想使用CSS设置HTML列表的样式。该列表将用作导航栏并始终显示在屏幕上。为避免浪费屏幕空间，默认情况下菜单应处于折叠状态，并且仅在鼠标悬停时展开。

预期的行为。 如果没有悬停，导航应该只显示列表的编号。如果用户将鼠标悬停在一个列表项上，则应展开以显示该项的文本。导航栏的背景颜色应延伸到该文本的末尾，但仅限于悬停在其上的项目的周围。也就是说，该项应该“弹出”导航。

实际行为。我找不到在这种情况下使背景颜色有效的方法。如果列表项的宽度设置为自动，则文本将按原样显示，但背景颜色不会随列表项一起延伸。如果我为列表项设置固定宽度（小提琴中的l.33），例如300px，然后背景颜色扩展文本，但我希望避免静态大小。为什么静态宽度的行为与自动宽度不同？

我已经尝试修复了悬停列表项的定位。这会产生我想到的效果，但它也有两个不良副作用：它从所选项目中删除自动编号，并从文本流中删除该项目，这使得连续项目在列表中向上移动。他们两个都必须手动补偿，我想避免。

JSFiddle和Code 这个小提琴说明了问题：https://jsfiddle.net/3n8g03y9/

＆＃13;

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;
  ;
}

＆＃13;

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

＆＃13;

Answer 1

简单的答案是使用set li 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

CSS：具有自动宽度的元素的背景颜色

1 个答案: