Почему размер моего div не изменится при изменении размера браузера?

Сейчас я работаю над довольно простым веб-сайтом, который будет служить своего рода словарем для некоторых моих работ с HTML и CSS. У меня есть div для терминов CSS на странице. Когда я сжимаю браузер, все остальное на странице сжимается, но этот div перемещается вправо и становится менее широким. Высота остается прежней, но ширина div становится тонкой. Слова в div вытекают, и это приводит к появлению полосы прокрутки.

На данный момент мой HTML выглядит так:

 .terms {
      list-style-position: inside;
      background-color: powderblue;
      box-shadow: 10px 10px 15px dimgray;
      padding: 20px;
      margin-left: 370px;
      margin-right: 370px;
    }
     
<div class="terms">
  <h2> CSS PROPERTIES: </h2>
    <ul>
     <li> <span class="def"> text-align </span> - left, center, right </li>
    </ul>
</div>

Другие элементы на моей странице — это абзацы, и все они изменяют размер. У меня есть 2 других div на странице для боковых комментариев, но они также изменяются в браузере. В случае, если это поможет, это CSS для div, который действительно правильно изменяет размер:

.notes{
      text-align: center;
      padding: 20px;
      font-weight: bold;
      border: 10px dotted navy;
      display: inline-block;
    }

Кто-нибудь знает, почему этот конкретный div не может изменить размер с помощью браузера?


browser html css
person Alex    schedule 13.07.2018    source источник
comment
Пожалуйста, добавьте тег ‹ul›‹/ul› оберните li   -  person Alfin Paul    schedule 13.07.2018

Ответы (4)


arrow_upward
0
arrow_downward

Проблема в том, что вы добавили следующие стили в свой div:

.terms {
  list-style-position: inside;
  background-color: powderblue;
  box-shadow: 10px 10px 15px dimgray;
  padding: 20px;
  /*Removing the margins from left and right
  margin-left: 370px;
  margin-right: 370px;*/
}

Удаление этих стилей решит вашу проблему

person Charu Maheshwari    schedule 13.07.2018

arrow_upward
0
arrow_downward

Вы также можете попробовать с max-width

.terms {
  list-style-position: inside;
  background-color: powderblue;
  box-shadow: 10px 10px 15px dimgrey;
  padding: 20px;
  max-width: 1160px;
  margin: 0 auto;
}

.notes {
  text-align: center;
  padding: 20px;
  font-weight: bold;
  border: 10px dotted navy;
  display: inline-block;
}
<div class="terms">
  <h2> CSS PROPERTIES: </h2>
  <ul>
    <li> <span class="def"> text-align </span> - left, center, right </li>
  </ul>
</div>

person vishnu    schedule 13.07.2018

arrow_upward
0
arrow_downward

Попробуйте использовать % или vh вместо px в вашем css. div с автоматическим изменением размера при изменении ширины\высоты окна Может не совсем соответствовать вашей проблеме, но я думаю, что она имеет отношение к вашей. Надеюсь, это поможет.

person P.Sai Shreyashi    schedule 13.07.2018

arrow_upward
0
arrow_downward

Вы можете увидеть, как удалить поля слева и справа и добавить теги ul.

person Erin Jaman    schedule 13.07.2018