我想创建一个左侧有图像、右侧有导航栏的导航。导航的位置是固定的。 问题是导航现在比周围的主体更宽。
如何使导航与 body 一样宽，同时固定其位置？
body {
margin: 20px 20px 0; }
body nav {
top: 0;
background-color: #fff;
padding: 10px 10px 0 0;
display: flex;
justify-content: space-between;
width: 100%;
position: fixed;
z-index: 99;
height: 80px; }
body nav .nav__logo {
width: 180px;
padding: 10px 0; }
body nav .nav__logo img {
width: 100%; }
body nav .nav__bar {
display: flex;
padding-right: 30px;
padding-left: 0;
justify-content: flex-end;
align-items: center;
flex: 1; }
body nav .nav__bar li {
margin: 0 20px; }
body nav .nav__bar .bar__level1 {
display: inline-flex; }
/*# sourceMappingURL=style.css.map */<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<title>Nav bar problem</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<nav>
<div class="nav__logo">
<a href="/" title="Start">
<img src="">
</a>
</div>
<div class="nav__bar">
<ul class="bar__level1">
<li><p>Start</p></li>
<li><p>Item1</p></li>
<li><p>Item2</p></li>
<li><p>Item3</p></li>
<li><p>Item4</p></li>
</ul>
</div>
</nav>
<main>
</main>
</body>最佳答案
您的导航比正文标记大，因为您在正文上设置了 20 像素的边距。
如果您将左右位置属性设置为 20px(与正文的边距相同)，您的导航将与其父级(正文标记)一样宽。
https://jsfiddle.net/dbku29oc/
body {
margin: 20px 20px 0; }
body nav {
top: 0;
left: 20px;
right: 20px;
background-color: #fff;
padding: 10px 10px 0 0;
display: flex;
justify-content: space-between;
/*width: 100%;*/
position: fixed;
z-index: 99;
height: 80px; }
body nav .nav__logo {
width: 180px;
padding: 10px 0; }
body nav .nav__logo img {
width: 100%; }
body nav .nav__bar {
display: flex;
padding-right: 30px;
padding-left: 0;
justify-content: flex-end;
align-items: center;
flex: 1; }
body nav .nav__bar li {
margin: 0 20px; }
body nav .nav__bar .bar__level1 {
display: inline-flex; }
/*# sourceMappingURL=style.css.map */<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<title>Nav bar problem</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<nav>
<div class="nav__logo">
<a href="/" title="Start">
<img src="">
</a>
</div>
<div class="nav__bar">
<ul class="bar__level1">
<li><p>Start</p></li>
<li><p>Item1</p></li>
<li><p>Item2</p></li>
<li><p>Item3</p></li>
<li><p>Item4</p></li>
</ul>
</div>
</nav>
<main>
</main>
</body>关于html - 如果位置固定，如何使元素与其父元素一样宽，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53259279/