如何防止导航栏中的元素在重新调整大小时被切断
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>
我希望元素保持间隔。
我认为您可以使用flexbox显示属性轻松实现这样的效果。
我用一个例子编辑了你的代码。使用li
上的flex-grow:1;
,它们将彼此划分可用的水平空间。为避免行换行,您可以考虑将flex-wrap:nowrap;
添加到ul
。
在使用弹性框之前,请考虑弹性框的浏览器支持。
@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>
我认为你应该阅读并学习一些关于响应式网页设计的知识。或者只是将float: left;
添加到您的nav ul li
中。
在此处阅读有关响应式网页设计的更多信息
相关文章:
- 内部分区字体大小获胜'调整浏览器窗口大小时不会随媒体查询而更改
- 调整窗口大小时,可拖动的对象会出现在容器外部
- 调整屏幕大小时更改属性值
- 如何在调整浏览器大小时将图像保持在适当位置
- 加载/调整大小时未切换图像数据标记
- 可以在调整窗口大小时重新调整stellar.js的元素偏移量
- 为移动设备调整页面大小时,引导模式会向下移动页面
- 可滚动元素,如何在调整大小时更改顶部偏移量
- 调整UIWebview的大小'更改其字体大小时的边框
- 如何获得一个进度元素,它被设置为在窗口调整大小时调整大小
- 在调整窗口大小时刷新浏览器(仅在展开或放大时)
- 调整父元素大小时,文本会移动
- 调整大小时移动在高图表上呈现的图像
- 根据窗口宽度修剪字符串,调整大小时出现问题
- jquery在调整大小时响应不起作用
- ExtJS 4-在调整窗口大小时,溢出的工具栏会失去控制器
- 如何在窗口调整大小时调整iframe的大小
- Css-是否可以在调整屏幕大小时使元素移动,以使其适合屏幕
- 调整浏览器大小时文本上的CSS省略号
- 画布FPS在调整屏幕大小时发生变化-Javascript