如何使導航文本的第二行不重疊

Question

我有這個頁面，我發展：

http://128.48.204.195:3000

出於某種原因，有兩個詞，如「SPRQL端點」菜單項具有的第二個字重疊在第二行。

如何讓第二個單詞保持在同一行上？這是在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

添加white-space: nowrap;的CSS聲明.menusystem ul li.main_menu_li。另外，你可能想要增加元素的寬度。也許從10em到12em或14em。

Answer 3

Add：white-space：nowrap;

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