как разместить div в теле с шириной 100%, с одинаковым левым и правым пространством? - PullRequest
Новая
       3

как разместить div в теле с шириной 100%, с одинаковым левым и правым пространством?

1 голос
/ 19 апреля 2020

У меня есть <div> с position:relativ (здесь нет метра, я также могу установить его на абсолютное значение) Я хочу разместить мое <div> пространство слева и справа с 20px, но width: должно быть 100%. Я даю свои коды, и вы можете видеть, как это выглядит сейчас с margin: 0 20px 0 20px

(пожалуйста, не удаляйте вопрос, я уже пробовал подобный вопрос извините: /)

- >> Второй вопрос, должен ли я сделать контейнер <div>, чтобы он включал все? или это умно сделать как я?

МОЙ HTML КОД 

<body>
<!-- <div class="container"> -->
    <div class="navbar">
        <ul>
            <li><a href="">HOME</a></li>
            <li><a href="">ABOUT</a></li>
            <li><a href="">INFO</a></li>
            <li><a href="">ME</a></li>
        </ul>   
    </div>
    <div class="daily">
    </div>
    <div class="aussen">
     ...

МОЙ CSS КОД 

body {

    margin: 0px;
    padding: 0px;
    background: #EFEFFB;
    /*overflow-x: hidden;*/
}

.navbar {

    position: absolute;
    width: 100%;
    height: 50px;
    background: grey;
    overflow: hidden;

}

.navbar ul {

    list-style-type: none;
    padding: 0px;
    margin-top: 0px;
    line-height: 50px;
}

.navbar ul li {

    float: left;
    margin-left: 15%;
    padding-left: 1%;
    padding-right: 1%;
    margin-top: 0px;

}


.navbar ul li a {

    color: white;
    text-decoration: none;
}


.navbar ul li:hover {

    background: #585858;

}

.daily {

    position: relative;
    top: 70px;
    height: 110px;
    width: 100%;
    border: 1px solid black;
    margin: 0 20px 0 20px


}

как это выглядит сейчас, как на картинке: enter image description here

так что пространство слева в порядке, но я хочу то же самое и справа. Что не так с моим кодом? - также принимать предложения по улучшению:)

Ответы [ 3 ]

2 голосов
/ 19 апреля 2020

Используйте внутренние div и padding на внешних div, чтобы достичь того, что вы хотите: 

.daily {
  position: relative;
  top: 70px;
  padding: 0 20px;
}

.inner {
  height: 110px;
  width: 100%;
  border: 1px solid black;
}
<div class="daily">
  <div class="inner"></div>
</div>
1 голос
/ 19 апреля 2020

Попробуйте это: 

<div className='daily-container'>
  <div className="daily">
  </div>
</div>

И CSS: 

.daily-container {
  padding: 0 20px;
}
.daily {
  position: relative;
  top: 70px;
  height: 110px;
  width: 100%;
  border: 1px solid black;
}
1 голос
/ 19 апреля 2020

Все так просто: В вашем файле .css просто удалите одну вещь из .daily класса: 

width:100%; // remove that and your margin will apply correctly left/right

Таким образом, ваш ежедневный класс должен выглядеть так: 

.daily {
position: relative;
top: 70px;
height: 110px;
border: 1px solid black;
margin: 0 20px 0 20px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...