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

【问题标题】：Perfectly align listings when using media query使用媒体查询时完美对齐列表
【发布时间】：2019-02-20 13:32:25
【问题描述】：

我得到了我的第一组列表样式，并以我想要的方式居中。现在我想在我的第二个列表中应用相同的内容，但其中包含更多信息。

现在，当您进入 F12 模式以将显示更改为 iPhone 时，它似乎有点偏离，并且第二个列表中的宽度看起来有点偏离。我希望宽度与第一个列表完全相同。

请注意，我喜欢桌面模式下的宽度，我只希望第二组列表的宽度与第一组列表中的宽度完全相同。

运行代码 sn-p 看看我在说什么。当你看到它时，它会更有意义。

.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>

【问题讨论】：

如果你在桌面上的宽度是 600px 那么你在 mob 上的宽度也是 600px ??
当您使用display:inline-block 时，它会尝试增加文本的宽度，在第一个列表中您也会遇到同样的问题。所以基本上你必须在你的媒体查询中设置一个宽度并使用重置 css，这样浏览器就不会采用默认 css
@Vitorino fernandes 所以我删除了 (display:inline-block) 然后将我的 (div.accomodationLists li) 更改为 (div.accomodationLists ul) 并使用我的填充。这似乎有点奏效，而且效果很好。

标签： html css responsive-design media-queries

【解决方案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 */
}

【讨论】：