时间戳

首页 > 解决方案 > 如果位置固定，如何使元素与其父元素一样宽

html - 如果位置固定，如何使元素与其父元素一样宽

问题描述

我想创建一个导航，左侧是图像，右侧是导航栏。导航的位置是固定的。问题是导航现在比它周围的身体更宽。

在固定位置的同时如何使导航与正文一样宽？

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>

https://jsfiddle.net/he4c6ur9/

标签： htmlcsssass

解决方案

您的导航比正文标签大，因为您在正文上设置了 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>

推荐阅读