如何使导航文本不重叠在第二行

Question

我正在开发这个页面：

http://128.48.204.195:3000

由于某种原因，菜单项具有像“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;

}

Answer 1

我的猜测是以下代码导致了问题（

.menusystem ul li.main_menu_li {
    float:right;
    width: 10em;
    margin-right:0.2em;
    text-align: center;
}

沟渠宽度）

Answer 2

添加：空白：nowrap；

.menusystem ul li.main_menu_li {
    float: right;
    margin-right: 0.2em;
    text-align: center;
    white-space: nowrap;
    width: 10em;
}

Answer 3

将 white-space: nowrap; 添加到 .menusystem ul li.main_menu_li 的 CSS 声明中。另外，您可能想稍微增加元素的宽度。也许从 10em 到 12em 或 14em。