gpt4 book ai didi

html - CSS 自定义
  • 定位在媒体查询中无法按预期工作
  • 转载 作者:行者123 更新时间:2023-11-28 00:56:10 28 4
    gpt4 key购买 nike

    我已经创建了 li 标签的自定义对齐,我想在 CSS 媒体查询中使用它。这是 JFiddle 的外观:

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

    li 在它们的容器中居中,文本以列表图像居中。现在我尝试将它与媒体查询一起使用:

    https://jsfiddle.net/ro7gj60h/

    应该发生的是,.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>

    最佳答案

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

    关于html - CSS 自定义 <li> 定位在媒体查询中无法按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52927488/

    28 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com