【发布时间】：2011-08-19 16:31:23
【问题描述】：
我正在开发这个页面：
由于某种原因，具有两个单词（如“SPRQL Endpoint”）的菜单项的第二个单词在第二行重叠。
如何使第二个单词保持在同一行？这是在 Firefox 中，这是我用于导航的 cs：
.menusystem
{
position: absolute;
font-size: 1em;
}
.menusystem ul, .menusyystem li
{
margin: 0;
padding: 0;
}
.menusystem li {
list-style: none outside none;
}
.menusystem ul {
list-style: none;
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
}
.menusystem ul li {
position: relative;
-moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
-webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
}
.menusystem ul li ul {
display: none;
position: absolute;
top: 1.6em;
right: 0;
width: 10em;
}
.menusystem li a {
display: block;
padding: 5px 10px;
/* dark blue */
border: 1px solid #2e6ea4;
text-decoration: none;
}
.menusystem ul li.main_menu_li {
float:right;
width: 10em;
margin-right:0.2em;
text-align: center;
}
/* IE-Win (Holly hack) reads the list item line breaks, so lets hide those \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
.menusystem li:hover ul, .menusystem li.mouseHover ul {
display: block;
}
.menusystem li ul.child_menu_ul li a{
/*
color: #fff;
*/
color: #fff;
/* light blue */
background: #7ba9c9;
font-size: 80%;
text-shadow: none;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-bottom: 1px solid #2e6ea4;
border-top: 0px;
}
.menusystem li ul.child_menu_ul li.first a{
-moz-border-radius-topleft: 14px;
-moz-border-radius-topright: 14px;
-webkit-border-top-left-radius: 14px;
-webkit-border-top-right-radius: 14px;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
border-top: 1px solid #2e6ea4;
}
.menusystem li ul.child_menu_ul li.last a{
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-bottomleft: 14px;
-moz-border-radius-bottomright: 14px;
-webkit-border-bottom-left-radius: 14px;
-webkit-border-bottom-right-radius: 14px;
}
.menusystem li ul.child_menu_ul li.only a {
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
}
.menusystem li ul.child_menu_ul li a:hover {
color: #ff0;
background: #2e6ea4;
}
.menusystem li.main_menu_li a{
color: #fff;
background: -moz-linear-gradient(100% 100% 90deg, #668eb8, #2e6ea4 );
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#668eb8), to(#2e6ea4));
background-color: #2e6ea4;
text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
-moz-text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
-webkit-text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
}
.menusystem li.main_menu_li a:hover {
color: #ff0;
}
【问题讨论】：
-
这里所有的答案都很棒——一个比另一个更有帮助！谢谢大家+1。
标签： html css stylesheet styles