Question

我正在做一个水平下拉菜单。它看起来像这样：

[menu1][menu2][menu3][menu4]

但是当我调整浏览器（不太宽）时，菜单显示如下：

[menu1][menu2]

[menu3][menu4]

我希望它始终保持一致！

编辑：我的CSS文件

/* General */
#cssdropdown, #cssdropdown ul {
  list-style: none;
  position: relative;
  visibility: visible;
  z-index: 1;
  overflow: hidden;
}
#cssdropdown, #cssdropdown * { padding: 0; margin: 0; }

/* Head links */
#cssdropdown li.headlink {
  width: 11.911em;
  float: left;
  margin-left: -1px;
  border: 1px black solid;
  background-color: #e9e9e9;
  text-align: center;
}
#cssdropdown li.headlink a { display: block; padding: 10px; }

/* Child lists and links */
#cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: center; }
#cssdropdown li.headlink:hover ul { display: block; }
#cssdropdown li.headlink ul li a { padding: 5px; height: 17px;}
#cssdropdown li.headlink ul li a:hover { background-color: #FF9; }

/* Pretty styling */
body {
  font-family: verdana, arial, sans-serif;
  font-size: 0.7em;
  position: static;
}
#cssdropdown a { color: black; font-weight: bold; font-size:10px } #cssdropdown ul li a:hover { text-decoration: none; }
#cssdropdown li.headlink { background-color: #FFF50A; }
#cssdropdown li.headlink ul { background-position: bottom; padding-bottom: 10px; }

/*headermenu*/
#headerMenu {
  position: relative;
  float: left;
  color: #DDD;
  z-index: 1;
  height: 34px;
  right: 10px;
  width: auto;
}

<div align="left" class="thrColElsHdr" id="headerMenu">
  <ul id="cssdropdown" name="cssdropdown">
    <li class="headlink"> <a href="index.php?mode=ecole&page=histoire">Ecole</a>
      <ul>
        <li><a href="index.php?mode=ecole&page=histoire">Histoire</a></li>
        <li><a href="index.php?mode=ecole&page=philosophie">Philosophie</a></li>
        <li><a href="index.php?mode=ecole&page=methode">M&eacute;thode</a></li>
        <li><a href="index.php?mode=ecole&page=equipe">Equipe</a></li>
        <li><a href="index.php?mode=ecole&page=qualite">Qualit&eacute;</a></li>
        <li><a href="index.php?mode=ecole&page=service">Services</a></li>
        <li><a href="index.php?mode=ecole&page=emploi">Emplois</a></li>
      </ul>
    </li>
    <li class="headlink"> <a href="index.php?mode=cours&page=individuel">Cours</a>
      <ul>
        <li><a href="index.php?mode=cours&page=individuel">Individuel</a></li>
        <li><a href="index.php?mode=cours&page=semiprive">Semi-priv&eacute;</a></li>
        <li><a href="index.php?mode=cours&page=minigroupe">Mini-groupe</a></li>
        <li><a href="index.php?mode=cours&page=intensif">Intensif</a></li>
        <li><a href="index.php?mode=cours&page=entreprise">Entreprises</a></li>
        <li><a href="index.php?mode=cours&page=distance">A distance</a></li>
        <li><a href="index.php?mode=cours&page=telephone">Par t&eacute;l&eacute;phone</a></li>
        <li><a href="index.php?mode=cours&page=coaching">Coaching</a></li>
        <li><a href="index.php?mode=cours&page=scolaire">Soutien scolaire</a></li>
        <li><a href="index.php?mode=cours&page=diplome">Dipl&ocirc;mes officiels</a></li>
      </ul>
    </li>
    <li class="headlink"> <a href="index.php?mode=inscription&page=formulaire">Inscription</a>
      <ul>
        <li><a href="index.php?mode=inscription&page=evaluation">Auto-&eacute;valuation</a></li>
        <li><a href="index.php?mode=inscription&page=condition">Conditions</a></li>
        <li><a href="index.php?mode=inscription&page=tarif">Tarifs</a></li>
        <li><a href="index.php?mode=inscription&page=formulaire">Formulaires</a></li>
      </ul>
    </li>
    <li class="headlink"> <a href="index.php?mode=contact&page=ecole">Contact</a>
      <ul>
        <li><a href="index.php?mode=contact&page=ecole">Ecole</a></li>
        <li><a href="index.php?mode=contact&page=lien">Lien externe</a></li>
      </ul>
    </li>
  </ul>
</div><br/>

Answer 1

您应该在包含菜单的元素上设置最小宽度。

Answer 2

你想使用css

white-space:nowrap;

这应该应用于菜单的父级

如果您提供一些实际的HTML，我可以更具体

例如

<div class='menuContainer'>
    <span>menu1</span>
    <span>menu2</span>
    <span>menu3</span>
    <span>menu4</span>
</div>

和css一样

.menuContainer {
    white-space:nowrap;
}

请参阅http://www.w3schools.com/css/pr_text_white-space.asp

修改以回应操作问题修改

我假设 #cssdropdown是所有菜单周围的容器ID。如果它不正确，请告诉我这个html。

无论如何，在这种情况下，你应该添加到你的CSS

#cssdropdown {
    white-space:nowrap;
}

另外注意，我看到男士的宽度设定为11.911em。当我看到我只能假设您将完全设置为您所拥有的任何字体的正确宽度。请记住，您的用户可能会略有不同的字体，突然您的像素完美大小毫无意义。设计时要考虑更多的灵活性。

Answer 3

听起来你的宽度属性没有在HTML或CSS中设置。

您能提供一些示例代码吗？

调整浏览器大小时的下拉菜单

3 个答案: