logo标签列表

防止CSS水平下拉菜单“换行”

htmlcss
4

我对这个事实感到非常沮丧，当浏览器窗口被调整大小时，这个小巧的菜单会自动换行。如何防止它换行并使其保持固定状态，而不管窗口是否被调整大小？

#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;
}
<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>
  </div>
</body>

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-block在IE7中无法正常工作。 解决方法在此处描述：

为了使inline-block在Internet Explorer中适用于任何元素，请在该元素样式的末尾添加“zoom:1; *display: inline; _height: 30px;”，并确保将高度更改为您需要的任何值。

0

尝试使用li { display:table-cell; }代替float:left

#menu ul { width: 9999px } #menu { overflow:hidden; }也许这样可以。 - bukart
0

您已经在<div id="menu">上设置了width: 100%;，这意味着它的宽度将与其父元素一样宽 - 这归结为浏览器窗口的宽度。

相反，强制执行一个大致等于元素内容大小的最小宽度，例如width: 35em;。这是一种相对测量方法，基于文本大小进行缩放，但如果内容更大，则需要增加它。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接