Как сделать элемент таким же широким, как его родитель, если его позиция фиксирована - PullRequest
Новая
       1

Как сделать элемент таким же широким, как его родитель, если его позиция фиксирована

0 голосов
/ 12 ноября 2018

Я хочу создать навигацию с изображением слева и панелью навигации справа. Положение навигации фиксировано. Проблема в том, что навигация теперь шире, чем тело вокруг него.

Как сделать так, чтобы навигация была такой же широкой, как тело, при фиксированном положении? 

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/

1 Ответ

0 голосов
/ 12 ноября 2018

Ваша навигация больше тега body, потому что вы установили поля для тела, размером 20px.

Если вы установите свойства позиции left и right в 20px (то же самое, что и поле тела), ваша навигация будет такой же ширины, как его родитель (тег body).

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...