Защо моят 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