html - CSS 自定义定位在媒体查询中没有按预期工作

Question

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

https://jsfiddle.net/4fwx7rbj/1/

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

https://jsfiddle.net/ro7gj60h/

应该发生的是，.half-widthdiv100vw和列表像第一个片段一样对齐。但是，这并没有按预期工作，有人可以帮我解决我所缺少的吗？

非常感谢。

这里是快速概览的 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>

标签： htmlcss

Answer 1

@media (max-width: 768px) 和 (min-width: 500px) .list-div {} 类中的显示 flex 缩小了 ul