調整大小時，如何防止導航欄中的元素被切除？
[英]How do I prevent elements in my nav-bar being cut off when re-sizing?
問題描述
我設法解決了一個問題，當添加以下內容調整窗口大小時，導航元素會聚集在哪里：
nav ul {
white-space: nowrap;
}
nav ul li {
display: table-cell;
}
但是現在，當我調整窗口大小時，導航欄中的元素正在消失。
@import url(https://fonts.googleapis.com/css?family=Pacifico); @import url(https://fonts.googleapis.com/css?family=Patua+One); body { margin: 0px; } header { width: 100%; background: rgba(0, 0, 0, 0.7); color: white; padding: 5px 15px 0px 15px; position: fixed; top: 0; left: 0; z-index: 999; } header h1 { font-size: 30px; display: inline; padding: 30px; font-family: 'Pacifico', cursive; } nav ul { margin: 0; display: inline; padding: 50px; white-space: nowrap; } #main { font-size: 80px; } nav ul li { color: white; list-style-type: none; display: inline-block; padding: 20px 65px; margin: 0px; font-family: 'Patua One', cursive; display: table-cell; } nav ul li:hover { color: #999; } #ghostButton { background: rgba(0, 0, 0, 0.3); border: 0.5px solid white; width: 200px; padding: 10px; display: inline-block; font-family: "Times new roman"; } #ghostButton:hover { background: rgba(255, 255, 255, 0.3); } #hero { background-size: cover; position: relative; height: 100vh; background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/1235217_483642721808631_6410301847003523270_n_zpse3g2acn1.jpg); } .header { position: absolute; top: 50%; text-align: center; width: 100%; color: #fff; font-size: 36px; -ms-transform: translate(0, -50%); /* IE 9 */ -webkit-transform: translate(0, -50%); /* Safari */ transform: translate(0, -50%); font-family: 'Pacifico', cursive; font-family: "Times new roman"; } .header1 { padding-bottom: 300px; color: black; text-align: center; font-size: 25px; font-family: 'Pacifico', cursive; font-family: "Times new roman"; } p { font-size: 20px; } /*# sourceMappingURL=stylesheet.css.map */
<! DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/stylesheet.css"> </head> <body> <header> <nav> <h1>Elianos Brasserie</h1> <ul> <li>Home</li> <li>Menu</li> <li>Page1</li> <li>Page2</li> </ul> </nav> </header> <div> </div> <div id="wrapper"> <div id="hero"> <div class="header"> <h1 id="main">Made with love</h1> <p>Ut wisi enim ad minim veniam, quis nostrud exerci <br>tation ullamcorper suscipit lobortis nisl ut <br>aliquip ex ea commodo consequat. Duis <br> </p> <div id="ghostButton">Learn More</div> </div> </div> </div> </body> </html>
我希望這些元素保持間隔。
2 個解決方案
解決方案1
0 2016-03-20 17:18:28
我認為您可以使用flexbox顯示屬性輕松實現這種效果。
我用一個示例編輯了您的代碼。 使用flex-grow:1; 在li ，他們將分彼此之間的可用水平空間。 為了避免行被換行，您可以考慮添加flex-wrap:nowrap; 對ul 。
在使用flexbox之前，請考慮對 flexbox 的瀏覽器支持 。
@import url(https://fonts.googleapis.com/css?family=Pacifico); @import url(https://fonts.googleapis.com/css?family=Patua+One); body { margin: 0px; } header { width: 100%; background: rgba(0, 0, 0, 0.7); color: white; padding: 5px 15px 0px 15px; position: fixed; top: 0; left: 0; z-index: 999; } header h1 { font-size: 30px; float:left; padding: 30px; font-family: 'Pacifico', cursive; } nav ul { margin: 0; display: inline; padding: 50px; display:flex; } #main { font-size: 80px; } nav ul li { color: white; list-style-type: none; display: inline-block; //padding: 20px 65px; margin: 0px; font-family: 'Patua One', cursive; flex-grow:1; } nav ul li:hover { color: #999; } #ghostButton { background: rgba(0, 0, 0, 0.3); border: 0.5px solid white; width: 200px; padding: 10px; display: inline-block; font-family: "Times new roman"; } #ghostButton:hover { background: rgba(255, 255, 255, 0.3); } #hero { background-size: cover; position: relative; height: 100vh; background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/1235217_483642721808631_6410301847003523270_n_zpse3g2acn1.jpg); } .header { position: absolute; top: 50%; text-align: center; width: 100%; color: #fff; font-size: 36px; -ms-transform: translate(0, -50%); /* IE 9 */ -webkit-transform: translate(0, -50%); /* Safari */ transform: translate(0, -50%); font-family: 'Pacifico', cursive; font-family: "Times new roman"; } .header1 { padding-bottom: 300px; color: black; text-align: center; font-size: 25px; font-family: 'Pacifico', cursive; font-family: "Times new roman"; } p { font-size: 20px; } /*# sourceMappingURL=stylesheet.css.map */
<! DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/stylesheet.css"> </head> <body> <header> <nav> <h1>Elianos Brasserie</h1> <ul> <li>Home</li> <li>Menu</li> <li>Page1</li> <li>Page2</li> </ul> </nav> </header> <div> </div> <div id="wrapper"> <div id="hero"> <div class="header"> <h1 id="main">Made with love</h1> <p>Ut wisi enim ad minim veniam, quis nostrud exerci <br>tation ullamcorper suscipit lobortis nisl ut <br>aliquip ex ea commodo consequat. Duis <br> </p> <div id="ghostButton">Learn More</div> </div> </div> </div> </body> </html>
解決方案2
0 2016-03-20 17:27:27
重新調整畫布大小時如何防止HTML5畫布線寬改變。
[英]How to prevent HTML5 canvas line width from changing when re-sizing the canvas.
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.