Question

我已经创建了li标签的自定义对齐方式，该标签要在CSS媒体查询中使用。这是JFiddle的外观：

li在其容器中居中，文本在列表图像中居中。现在，我尝试将其与媒体查询一起使用：

应该发生的是，.half-width div取100vw，并且列表像第一个片段一样对齐。但是，这确实无法按预期工作，有人可以帮助我我所缺少的东西吗？

非常感谢。

此处是HTML的简要概述：

  <div class="container">
  <div class="half-width section3">
    <div class="half-width-content">
    <div class="middle-text">
    <h2>A Headline</h2>
    <p>
    Some paragraph
    </p>
      <div class="list-div" id="A">
        <ul class="items-list" id="list">
          <li class="animation-listener">This is a list item</li>
          <li class="animation-listener">This is a list item</li>
          <li class="animation-listener">This is a list item</li>
          <li class="animation-listener">This is a list item</li>
        </ul>
      </div>
      <img class="hand-writing-img" src="https://fakeimg.pl/498x50/?text=this is some image">
    </div>
    </div>
  </div>
  </div>

Answer 1

@media类中的显示弹性（最大宽度：768像素）和（最小宽度：500像素） .list-div {}缩小ul

CSS自定义<li>定位在媒体查询中无法按预期工作

1 个答案: