css - 如何将 max-width 属性赋予具有视口(viewport)填充的列表元素

Question

我已经为我的 div 中的 li 项设置了视口(viewport)填充。我希望 li 元素在 1025px 后停止扩展。但是设置最大宽度似乎不起作用。请帮忙

             .header_topics > ul> li> a{
                   padding : 5vw 2vw 5vw 2vw;

              }






              <div class="header_topics">

                        <ul  style="display:flex;justify-content:center;max-width:1025px;width:100%;background:green">
                                    <li ><a href= "{% url 'home' %}" target="_self" > <span style="max-width:1025px">Home</span></a></li>
                                    <li ><a href="{% url 'about' %}" target="_self"  ><span style="max-width:1025px;color:#a4a6a8;border:none"> About</span></a></li>
                                    <li><a href="#" ><span style="max-width:1025px">Products</span></a></li>
                                    <li><a href="#"><span style="max-width:1025px">Solutions</span></a></li>
                                    <li s><a href="{% url 'support' %}" target="_self"  ><span style="max-width:1025px" >Support</span></a></li>
                                </ul>


                    </div>

Answer 1

此菜单在窗口大小为 1025px 后将停止变宽(假设 .header-topics 的宽度是窗口的宽度。

当您设置 li max-width 属性时，您是在说每个菜单项的最大宽度为 1025 像素，而实际上您打算限制菜单的宽度。希望对您有所帮助。

.header_topics {
  max-width: 1025px;
}

.header_topics li {
  padding: 5vw 2vw;
}

@media only screen and (min-width: 1025px) {
  .header_topics li {
    // your fixed padding here
  }
}

<div class="header_topics">
  <ul  style="display:flex;justify-content:center;width:100%;background:green">
    <li><a href= "{% url 'home' %}" target="_self" > <span>Home</span></a></li>
    <li><a href="{% url 'about' %}" target="_self"  ><span style="color:#a4a6a8;border:none"> About</span></a></li>
    <li><a href="#" ><span>Products</span></a></li>
    <li><a href="#"><span>Solutions</span></a></li>
    <li><a href="{% url 'support' %}" target="_self"  ><span>Support</span></a></li>
  </ul>
</div>