防止包装菜单项

【问题标题】：Prevent wrapping of menu items防止包装菜单项
【发布时间】：2012-07-17 10:09:35
【问题描述】：

我为我的网站创建了一个水平导航（菜单）栏。当我将窗口的大小重新调整为小于栏的大小时，菜单项会被包装。我希望菜单保持不变（也就是说，它应该保持水平），而不管窗口的大小，因为它通常可以在 Google 等网站上看到。我尝试了在各种论坛上发布的各种方式，包括这个，但对我没有任何效果。下面我粘贴了菜单的 CSS 代码。

CSS CODE:

#cssmenu ul { margin: 0; padding: 0;}
#cssmenu li { margin: 0; padding: 0;}
#cssmenu a { margin: 0; padding: 0;}
#cssmenu ul {list-style: none;}
#cssmenu a {text-decoration: none;}
#cssmenu {height: 70px; background-color: #6699CC; box-shadow: 0px 2px 3px rgba(0,0,0,.4); }


#cssmenu > ul > li {
    float: left; 
    margin-left: 30px;
    position: relative;

}

#cssmenu > ul > li > a {
    color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 70px;
    padding: 15px 20px;
-webkit-transition: color .15s;
   -moz-transition: color .15s;
     -o-transition: color .15s;
        transition: color .15s;

}

#cssmenu > ul > li > a:hover {color: #00FF00; }
body.home li.home, body.tech li.tech {font-weight:bold; }

#cssmenu > ul > li > ul {
    opacity: 0;
    visibility: hidden;
    padding: 16px 0 20px 0;
    background-color: #FFFFFF;
    text-align: left;
    position: absolute;
    top: 55px;
    left: 50%;
    margin-left: -90px;
    width: 180px;
-webkit-transition: all .3s .1s;
   -moz-transition: all .3s .1s;
     -o-transition: all .3s .1s;
        transition: all .3s .1s;
-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
        border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
   -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
        box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}

#cssmenu > ul > li:hover > ul {
    opacity: 1;
    top: 65px;
    visibility: visible;
}

#cssmenu > ul > li > ul:before{
    content: '';
    display: block;
    border-color: transparent transparent rgb(250,250,250) transparent;
    border-style: solid;
    border-width: 10px;
    position: absolute;
    top: -20px;
    left: 50%;
    margin-left: -10px;
}

#cssmenu > ul ul > li { position: relative;}

#cssmenu ul ul a{
    color: rgb(50,50,50);
    font-family: Verdana, 'Lucida Grande';
    font-size: 13px;
    background-color: rgb(250,250,250);
    padding: 5px 8px 7px 16px;
    display: block;
-webkit-transition: background-color .1s;
   -moz-transition: background-color .1s;
     -o-transition: background-color .1s;
        transition: background-color .1s;
}

#cssmenu ul ul a:hover {background-color: rgb(240,240,240);}

#cssmenu ul ul ul {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: -16px;
    left: 206px;
    padding: 16px 0 20px 0;
    background-color: rgb(250,250,250);
    text-align: left;
    width: 160px;
-webkit-transition: all .3s;
   -moz-transition: all .3s;
     -o-transition: all .3s;
        transition: all .3s;
-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
        border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
   -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
        box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}


#cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;}


#cssmenu ul ul a:hover{
    background-color: rgb(205,44,36);
    color: rgb(240,240,240);
}

HTML 代码：

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <link href="styles.css" rel="stylesheet" type="text/css">
 <title>Home</title>
</head>
<body class="home" background="teenscorner1.jpg" text="#FFFFFF" style="background-attachment: fixed">
 <div id='cssmenu'>
  <ul>
   <li class="home"><a href='home.jsp'><span>Home</span></a></li>
   <li class="tech"><a href='tech.jsp'><span>Tech Specs</span></a></li>
   <li><a href='#'><span>Fun</span></a></li> 
   <li><a href="#"><span>Deals</span></a></li>
   <li><a href="#"><span>Wheelz</span></a></li>
   <li><a href='#'><span>About</span></a></li>
  </ul>
 </div>
</body>

【问题讨论】：

    标签： css


    【解决方案1】：

    当您不知道宽度时，因为链接的宽度可能不同，您可以在列表项&lt;li&gt; 上使用display: inline-block，在列表本身&lt;ul&gt; 上使用white-space:nowrap

    http://jsfiddle.net/Frd8J/

    【讨论】：

    • 注意项目之间的空间！您可以通过将 de li 打开标签放在结束标签上来删除空格。
  • 。我希望无论窗口大小如何，菜单都应保持原样（也就是说，它保持水平），因为它通常可以在 Google 等网站上看到。
  • 我的意思是说当我调整窗口大小时，菜单项会转移到下一行。我不希望这种情况发生。我希望 dat 菜单项保持在最大化窗口时的位置。
  • 我不明白。 @Gijs 提供的解决方案对我来说效果很好，而且比我的更灵活。
  • Gijs，它对我不起作用。我粘贴了你所做的CSS。我的问题仍然存在。
    • 【解决方案2】：

    您应该为#cssmenu &gt; ul 设置一个min-width，这样可以让您的所有菜单项都适合。

    【讨论】：

    • 它应该可以工作，但在我看到 HTML 之前，我不知道为什么它在你的情况下不起作用。
    • 是的，它对你有用.. bt 它不适合我.. 我像你一样改变了我的 css.. bt d 问题仍然存在。
    • 能否也给我们一个直播网站的链接？
    • 直播网站尚未完全开发。因此，无法提供指向它的链接。对不起。
    • 与离线观看和上传网站到某个服务器后的观看有什么关系吗？
    【解决方案3】：

    接受的答案在我的情况下不起作用，但@Ana 原始答案有效。我试图将此作为评论添加到她的答案中，但它不适合。按照建议在 UL 上放置最小宽度，根据需要将所有 LI 项目带回一行，但该行延伸到包含 div 的右侧。我向父 div 添加了相同的最小宽度，我得到了我想要的，所有 LI 在容器内的一行上。作为最后一步，我从 UL 中删除了 min-width （所以这是一个不同的，比 Ana 的更通用的答案）并且一切仍然有效。简而言之，如果您按照接受的答案中的说明在 css 中制作 UL nowrap 并且无论如何它都会换行，那么请确保您为列表提供足够的宽度，以便它不需要换行。另一种增加宽度的方法（不使用 min-width）也是增加包含 div 中 UL 下方的内容区域的宽度。我的案例是一个选项卡 DIV，LI 是顶部的选项卡。每个选项卡下面都有内容。当下面的内容足够宽时，LI 已经排成一排。我本可以在每个选项卡内容上设置一个最小宽度，但对我来说，将它放在外部容器上一次效果更好。 HTH。

    【讨论】：

      【解决方案4】：

      我假设这些是你的导航栏项目

      <li class="home"><a href='home.jsp'><span>Home</span></a></li>
<li class="tech"><a href='tech.jsp'><span>Tech Specs</span></a></li>
<li><a href='#'><span>Fun</span></a></li> 
<li><a href="#"><span>Deals</span></a></li>
<li><a href="#"><span>Wheelz</span></a></li>
<li><a href='#'><span>About</span></a></li>

      如果你只是这样放它们

      <li class="home"><a href='home.jsp'><span>Home</span></a></li>&nbsp;<li class="tech"><a href='tech.jsp'><span>Tech Specs</span></a></li>&nbsp;<li><a href='#'><span>Fun</span></a></li>&nbsp;<li><a href="#"><span>Deals</span></a></li>&nbsp;<li><a href="#"><span>Wheelz</span></a></li>&nbsp;<li><a href='#'><span>About</span></a></li>

      这就是你所要做的就是将它们全部连接在一起，在 li 结束和开始标记之间没有空格，现在这将显示它们全部在你加载页面上的导航项之间没有空格，所以你可能不会希望它们都像一个条一样在视觉上连接起来，所以 iv 还在 li 结束和开始标签之间放置了一个空格的代码，这将为您在加载的屏幕上视觉上为所有导航标签之间提供一个空格，但它们仍然会保持绑在一起，这样如果你把屏幕变窄就不会放样。

      【讨论】：

        【解决方案5】：

        我的菜单项换行到下一行时遇到了同样的问题。它做了一些改变。首先，我必须将&lt;ul&gt; 设置为最大高度并将溢出设置为隐藏。然后我只需要为父容器设置一个宽度。

        在我的例子中，由于设计是响应式的并且可用区域发生了变化（因为菜单的两侧都是具有预设硬宽度的元素）我不得不随着它的增长而扩展给定的区域。

        #primary-menu {
  display: none;
}

@media screen and (min-width: 59em) {
  #primary-menu {
    display: inline-block;
    width: 74%;
  }
}

@media screen and (min-width: 64em) {
  #primary-menu {
    width: 78%;
  }
}

@media screen and (min-width: 78.75em) {
  #primary-menu {
    width: 83%;
  }
}

ul {
  max-height: 53px;
  overflow: hidden;
}
        <div id="primary-menu" class="menu">
  <ul class="menu menu__navigation--primary">
    <li class="first leaf active-trail">
      <a href="/equipment" class="active-trail active">Equipment</a>
    </li>
    <li class="leaf">
      <a href="/solutions">Solutions</a>
    </li>
    <li class="leaf">
      <a href="/services">Services</a>
    </li>
    <li class="leaf">
      <a href="/locations">Locations</a>
    </li>
    <li class="leaf">
      <a href="/our-company">Our Company</a>
    </li>
    <li class="last leaf">
      <a href="/contact-us">Contact Us</a>
    </li>
  </ul>
</div>

        【讨论】：

          【解决方案6】：

          你应该给“ul”标签添加“display:flex”

          【讨论】：

            猜你喜欢
            相关资源
            最近更新 更多
            热门标签
            Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode