Идеально выравнивать списки при использовании медиа-запроса - PullRequest
Новая
       7

Идеально выравнивать списки при использовании медиа-запроса

0 голосов
/ 20 февраля 2019

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

Теперь, когда вы переходите в режим F12, чтобы изменить отображение на iPhone иширина выглядит немного во втором списке.Я хочу, чтобы ширина была точно такой же, как в первых списках.

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

Запустите фрагмент кода, чтобы увидеть, о чем я говорю.Это будет иметь больше смысла, когда вы увидите это. 

.listContainer {
  text-align: center;
  font-size: 24px;
}

div.listContainer ul {
  display: inline-block;
  text-align: left;
}

div.listContainer li {
  list-style: none;
  border: 2px solid #000000;
  padding: 5px 50px;
  margin: 7px;
}

div.accomodationLists ul {
  display: inline-block;
  text-align: left;
}

div.accomodationLists li {
  list-style: none;
  border: 2px solid #000000;
  padding: 5px 50px;
  margin: 7px;
}

@media screen and (max-width: 440px) {
  .listContainer {
    text-align: left;
    font-size: 24px;
  }
  div.listContainer li {
    max-width: 100%;
    margin: 7px auto;
  }
  .accomodationLists {
    text-align: left;
    font-size: 24px;
  }
  div.accomodationLists li {
    max-width: 100%;
    padding: 5px 10px;
    margin: 7px auto;
  }
}
<!-- First listing -->

<div class="listContainer">
  <ul>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
  </ul>
</div>

<!-- Second listing -->

<div class="accomodationLists">
  <ul>
    <li>
      Mini title
      <br>
      <br> Small description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
      <br>
      <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
    </li>

    <li>
      Mini title number 2
      <br>
      <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
    </li>

  </ul>
</div>

1 Ответ

0 голосов
/ 20 февраля 2019

Поскольку вы использовали display:inline-block, это займет width текста внутри него, так как вы добавили одинаковое содержимое для всех элементов в первом листинге, с которыми у вас не возникло никаких проблем, после того как вы изменили содержимое любого из них.элемента, с которым вы столкнетесь с той же проблемой, что и второй листинг

Вы можете использовать сброс css, чтобы удалить все свойства, добавленные браузерами 

*{
    margin:0; /* removes default margin give by browsers */
    padding:0; /* removes default padding give by browsers */
    box-sizing:border-box; /* this gives padding and border from inside */
}
...