2016-11-23 72 views
0

我嘗試刪除「Startseite」,並在下面的「新聞」的下拉列表的數量,無論我嘗試它總包刪除Word休息

jsfiddle.net

我試圖讓

之間的決裂
#navigation nav #main-list li ul li 

停止包裹,但沒有的CSS包裝功能爲我工作

回答

2
#navigation nav #main-list li ul { 

    white-space: nowrap; 
} 

我注意到,你的CSS可以簡化爲:

  • 避免*規則,they are expensive和重置邊距和填充零混亂式的默認值,可以傷害可讀性,除非你打算去通過手動設置的努力他們爲您使用的每個元素。
  • 當瀏覽器窗口很窄時,您的菜單不起作用。
  • float: left;現在已過時用於水平堆疊元素。考慮使用display: inline-box代替,這也讓您更好地控制外觀,並意味着您可以避免使用clear
  • 即使float你不需要手動<div class="clearer">了,使用::after僞元素代替:

    (container of floating elements)::after { 
        display: block; 
        content: " "; 
        clear: both; 
    } 
    
  • nav元素在這種情況下被浪費。考慮用<nav>替換您的<div id="navigation">,並刪除內部的<nav>元素。

  • 您的<div id="wrapper">在本例中沒有任何用途。另外,請考慮用簡單的<section>元素替換它,這會使您的標記(略)更加語義化。
+0

這工作,謝謝 –

+0

你是什麼意思:當瀏覽器窗口很窄?對於包裝:這是迄今爲止還沒有完成,它將在以後的目的。感謝您的其他建議 –

0

添加white-space: nowrap;#navigation nav #main-list li a

this updated fiddle

#navigation nav #main-list li a { 
    display: block; 

    padding: 0 12px; 

    color: #eee; 
    white-space: nowrap; 
    text-decoration: none; 
} 
0

只要其確定爲您手動編輯代碼,你可以做到這一點很簡單的變化。

取代:

<li><a href="/">Startseite&nbsp;1</a></li> 

<li><a href="/">Startseite&nbsp;1</a></li> 

&nbsp;代表不換行空格,而這正是你所需要的。

+0

嗯,這可能會工作,但不是很好的做法我猜 –