當我讓我的屏幕更小時，菜單出來了

我正在爲自己製作網站。我從菜單開始，但我有一個小問題，如果我讓我的屏幕變小，文本出來的菜單。當我讓我的屏幕更小時，菜單出來了

，在這裏我有我的HTML鍵入的代碼：

<div id="header"> 


      <div id="menu"> 
       <ul> 
        <li>Home</li> 
        <li>Over mij</li> 
        <li>Ervaringen</li> 
        <li>Contact</li> 
       </ul> 
      </div> 


     </div>

和CSS：

body 
{ 
    margin: 0px; 
    padding: 0px; 
} 

#menu 
{ 
    width: 100%; 
    height: 100px; 
    background-color: rgba(53, 43, 35, 0.70); 
} 

ul 
{ 
    margin: 0px; 
    margin-left: 75%; 
} 

li 
{ 
    display: inline; 
    padding-left: 2%; 
    font-size: 19px; 
    line-height: 100px; 
    overflow: auto; 
}

來源

2016-05-16 Kip Verslaafde

嘗試讀取[這裏]（http://www.w3schools.com/bootstrap/bootstrap_navbar.asp）或者[這裏]（HTTP：//www.w3schools .com/howto/howto_js_topnav.asp） –

添加溢出：隱藏到菜單ID。 – Steveo

您將需要不同的方法 - 谷歌'響應式設計'。標題只是開始.... – sinisake

-2

添加單詞休息和空格屬性裏的標籤。

li { word-break: break-word; 
     white-space: normal; 
    }

來源

2016-05-16 13:03:51

請先試試你的解決方案，然後發佈爲答案，因爲它根本不工作。謝謝 –

在這種情況下，它不起作用，只需先嚐試一下你的解決方案 –

您應該刪除利潤率左從UL風格

ul{ 
margin: 0px; 
}

，如果你想要的菜單項是在你只需要添加頁面左側文本阿玲到UL

ul{ 
margin:0; 
text-align:right; 
}

見你的演示在這裏編輯後：https://jsfiddle.net/IA7medd/k6bu3bt8/1/

而這個演示中，你也可以用於響應式設計，適用於所有設備：https://jsfiddle.net/IA7medd/o89pn61t/

來源

2016-05-16 13:07:29

，如果你將使小屏幕文本將開箱即用。對不對？ –

是的，它會在小屏幕上出現，但你可以看到這個例子，它將解決小屏幕上的問題：https://jsfiddle.net/IA7medd/o89pn61t/ –

不錯的一個..對於我的線路感到抱歉，但你也應該在你的回答中提及這一點。 –

嗯，如果您希望在更小的屏幕上顯示完整菜單，您可以使用媒體查詢。

像這樣的小提琴：https://jsfiddle.net/odn0Lzfc我已經添加以下媒體查詢休息你的代碼是相同的。

@media screen and (max-width:768px){ 
    ul{ 
    margin-left: 0; 
    } 
} 
@media screen and (max-width:480px){ 
    li{ 
    font-size: 16px; 
    } 
}

它會做的是調整您的內容的各個屏幕大小。

瞭解更多有關媒體查詢的位置：https://css-tricks.com/snippets/css/media-queries-for-standard-devices

來源

2016-05-16 13:13:51

當我讓我的屏幕更小時，菜單出來了

回答

相關問題