使用媒体查询时完美地对齐列表

Question

我得到了我的第一套列表样式，并以我希望的方式为中心。现在我想在我的第二个列表中应用相同的东西，除了它有更多的信息。

当你进入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>

Answer 1

正如您使用display:inline-block一样，它将采用其中文本的width，因为您为第一个列表中的所有元素添加了相同的内容，一旦您更改了您将面临的任何一个元素的内容，它就不会遇到任何问题与第二个清单相同的问题

您可以使用reset 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 */
}