我的内容有限制(宽度为 1000 像素的 div)。我还有一个包含多个元素( Logo 、导航列表和社交媒体图标)的固定导航。我需要导航保持整页(白色背景)，但元素要在中心的 1000px 内居中(所以它是对称的)。
我尝试在页眉中添加另一个 div 并将宽度设置为 1000 像素，但它破坏了我的整个页眉。我尝试删除和添加边距和填充，但这不是永久性解决方案(向图标添加填充 - 权利仅适用于一种尺寸的屏幕)。将 1000 像素的 div 移动到顶部导致不是全 Angular 导航。
@import url('https://fonts.googleapis.com/css?family=Montserrat:500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li,
a {
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
text-decoration: none;
color: black;
padding: 0 0;
}
body {
background: linear-gradient(to top, #007991, #78ffd6);
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0;
padding-top: 65px;
}
header {
display: inline-flex;
align-items: center;
justify-content: space-between;
padding: 0;
background: white;
position: fixed;
top: 0;
width: 100vw;
}
.navlinks {
list-style: none;
}
.navlinks a {
float: left;
padding: 0 0;
}
.navlinks a {
transition: all 0.1s ease 0s;
line-height: 45px;
display: inline-block;
padding: 0 10px;
}
.navlinks a:hover {
color: #000033;
background: #73FAD3;
}
.Inhalt {
background: white;
width: 1000px;
margin: auto;
padding: 50px;
}<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="header-branding">
<img class="header-logo" src="" alt="LOGO">
</div>
<nav class="navlinks">
<a href="#">Menu1</a>
<a href="#">Menu2</a>
<a href="#">Menu3</a>
<a href="#">Menu4</a>
</nav>
<ul class="socialmediaicons">
<a class="fa fa-facebook" href="#"></a>
<a class="fa fa-twitter" href="#"></a>
<a class="fa fa-spotify" href="#"></a>
</ul>
</header>
<div class="Inhalt">
<article>
<h3>Article 1</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</article>
</div>
</body>你可以在这里看到代码:
https://jsfiddle.net/h423L8ro/3/
如何让元素与 1000 像素的 div 对称？
最佳答案
我想这就是你想要的
我在你的标题中添加了一个 div，然后我给它添加了样式，这样它就不会破坏你的标题。
.navbar {
width: 1000px;
margin: auto;
display: inline-flex;
align-items: center;
justify-content: space-between;
}<header>
<div class="navbar">
<div class="header-branding">
<img class="header-logo" src="" alt="LOGO">
</div>
<nav class="navlinks">
<a href="#">Menu1</a>
<a href="#">Menu2</a>
<a href="#">Menu3</a>
<a href="#">Menu4</a>
</nav>
<ul class="socialmediaicons">
<a class="fa fa-facebook" href="#"></a>
<a class="fa fa-twitter" href="#"></a>
<a class="fa fa-spotify" href="#"></a>
</ul>
</div>
</header>此外，您应该将标题的宽度更改为 100% 而不是 100vw，因为 vw 不考虑滚动条宽度。
关于html - 如何在导航保持全宽时将导航项居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57682187/