CSS 防止包装菜单项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11540268/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent wrapping of menu items
提问by user1534536
I created a horizontal navigation (menu) bar for my site. When I re-size my window to a size smaller than that of the bar, the menu items get wrapped. I want the menu to remain intact (that is, it should remain horizontal) irrespective of the size of window as it usually can be seen in sites such as Google. I tried various ways posted on various forums including this one but nothing worked for me. Below I have pasted my CSS code for the menu.
我为我的网站创建了一个水平导航（菜单）栏。当我将窗口的大小重新调整为小于栏的大小时，菜单项会被包裹。我希望菜单保持完整（也就是说，它应该保持水平）而不管窗口的大小，因为它通常可以在 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 Code:
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>
回答by Gijs
When you don't know the width because the links can differ in width you could use display: inline-blockon the list item <li>and white-space:nowrapon the list itself <ul>
当您不知道宽度时，因为链接的宽度可能不同，您可以display: inline-block在列表项<li>和white-space:nowrap列表本身上使用<ul>
回答by Ana
You should set a min-widthfor #cssmenu > ul, one that allows all your menu items to fit.
您应该设置一个min-widthfor #cssmenu > ul，它允许您的所有菜单项都适合。
回答by Ted Cohen
The accepted answer did not work in my case but @Ana original answer did. I tried to add this as a comment to her answer but it would not fit. Putting a min-width on the UL as suggested, brought all of the LI items back to one line as desired, but that line extended to the right of the containing div. I added the same min-width to the parent div and I got what I wanted, all of the LI on one line within the container. As a final step, I removed the min-width from the UL (so this is a different, more general answer than Ana's) and everything still worked. In a nut shell if you make the UL nowrap in css as documented in the accepted answer and it wraps anyway, then make sure you give the list enough width so that it does not need to wrap. Another way to increase the width that also works (without using min-width) is to increase the width of the content area below the UL in the containing div. My case was a tabbed DIV, the LIs were the tabs on top. Each tab had content below it. When the content below was wide enough already the LIs stayed in one row. I could have put a min width on every tab content, but for me it worked better to put it once on the outside container. HTH.
接受的答案在我的情况下不起作用，但@Ana 原始答案起作用了。我试图将此作为评论添加到她的答案中，但它不适合。按照建议将最小宽度放在 UL 上，根据需要将所有 LI 项目带回到一行，但该行扩展到包含 div 的右侧。我向父 div 添加了相同的 min-width ，我得到了我想要的，所有 LI 在容器内的一行上。作为最后一步，我从 UL 中删除了 min-width（因此这是一个与 Ana 不同的、更通用的答案），并且一切仍然有效。简而言之，如果您按照接受的答案中的说明在 css 中制作 UL nowrap 并且无论如何它都会包装，那么请确保为列表提供足够的宽度，以便它不需要包装。另一种增加宽度的方法（不使用 min-width ）是增加包含 div 中 UL 下方的内容区域的宽度。我的情况是标签式 DIV，LI 是顶部的标签。每个标签下面都有内容。当下面的内容已经足够宽时，LI 就排成一排。我可以在每个选项卡内容上放置一个最小宽度，但对我来说，将它放在外部容器上一次效果更好。哈。
回答by Patrick
I am having the same problem with my menu items wrapping to the next line. It took a few changes. First, I had to set the <ul>to have a max-height and overflow set to hidden. Then I just had to set a width to the parent container.
我的菜单项换行到下一行时遇到了同样的问题。它进行了一些更改。首先，我必须将<ul>最大高度和溢出设置为隐藏。然后我只需要为父容器设置一个宽度。
In my case, since the design is responsive and the area available changes (since the menu is flanked on both sides by elements with preset hard widths) I had to expand the area given as it grows.
就我而言，由于设计具有响应性并且可用区域发生变化（因为菜单两侧都是具有预设硬宽度的元素），我不得不随着它的增长而扩展给定的区域。
#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>回答by phil
im assuming these are you nav bar items
我假设这些是你的导航栏项目
<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>
if you just put them like this
如果你把它们像这样
<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>
thats all you have to do is join them all together with no spaces between the li end and start tags, now that would display them all in line with no spaces visually between your nav items on your loaded page, so you might not want them all to be visually joined like its one bar, so iv also put a code for a space in between the li end and start tags, this will give you a single space between all nav tags visually on your loaded screen but they will still stay tied together so that wont go staking up if you make screen narrow.
这就是您所要做的就是将它们全部连接在一起，在 li 结束标记和开始标记之间没有空格，现在这将显示它们全部对齐，加载页面上的导航项目之间没有视觉上的空格，因此您可能不希望它们全部要像它的一个条形一样在视觉上连接起来，所以 iv 还在 li 结束和开始标签之间放置了一个空格代码，这将使您在加载的屏幕上的所有导航标签之间有一个单独的空间，但它们仍然会保持在一起所以如果你把屏幕变窄就不会放样了。
