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

由于您使用了function test(x) { var sum = 0, n = 1, a = 0; while (sum <= x) { sum += n; n = n + 1; a += 1; console.log(a, sum); } return a - 1; } console.log(test(10)); console.log(test(11)); var num = prompt("Enter a number"); var output = test(num); console.log("Result is :", output);，因此其中的文本将display:inline-block包含在内，因为您为第一个清单中的所有元素添加了相同的内容，因此，一旦更改，就不会遇到任何问题。任何元素的内容，您将面临与第二个列表相同的问题

您可以使用reset css删除浏览器添加的所有属性

width

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

1 个答案: