调整大小时，如何防止导航栏中的元素被切除？
[英]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.