Question

我已将视口填充设置为div中的li项。我希望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

在窗口大小为1025像素之后（假设.header-topics的宽度是窗口的宽度。

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

.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>

如何使用视口填充将max-width属性赋予列表元素

1 个答案: