显示：块；对@media没有影响（最大宽度：320像素）

Question

display:block; not applying on max-width: 320px. 不适用于最大宽度：320像素。

Background changes to green, but <li> keeps displaying as float: 背景变为绿色，但<li>始终显示为浮动：

.parent-ul li {
    display: block;
    height: 32px;
    width: 15.7%;
/*    float: left;*/
}

 * { margin: 0; padding: 0; box-sizing: border-box; } body { background: royalblue; font-family: monospace; } header { position: relative; top: 0px; margin: 0 auto; height: 38px; width: 100%; padding-top: 2px; background: red; } .parent-ul { position: relative; list-style: none; text-align: center; margin-left: 16%; } .parent-ul li { height: 32px; width: 15.7%; float: left; } .parent-ul li{ border-left: 1px solid silver; } #prod { border-right: 1px solid silver; } .parent-ul a { text-decoration: none; color: white; padding: 12px 38px; font-size: 15px; transition: color 1s, font-size .5s; line-height: 32px; } /* 398px ================================= */ @media screen and (max-width: 320px) { body { background: green; } header { position: relative; top: 0px; margin: 0 auto; /* height: 38px;*/ width: 100%; padding-top: 2px; background: red; } .parent-ul { position: relative; list-style: none; text-align: center; margin-left: 16%; } .parent-ul li { display: block; height: 32px; width: 15.7%; /* float: left;*/ } .parent-ul li{ border-left: 1px solid silver; } #prod { border-right: 1px solid silver; } .parent-ul a { text-decoration: none; color: white; padding: 12px 38px; font-size: 15px; transition: color 1s, font-size .5s; line-height: 32px; } }

 <body> <header> <ul class="parent-ul"> <li><a href="homepage.html">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> <li><a href="#">Contact</a></li> <li id="prod"><a href="index.html">About&nbsp;Us</a></li> </ul> </header> </body>

Answer 1

whenever you use float always clear it. 每当您使用float时，请务必清除它。 In your case you used float in web but you haven't clear it at 320 media query, clear it using the float: none; 在您的情况下，您在Web中使用了float，但尚未在320媒体查询中清除它，请使用float清除它：none; clear: both; 清楚的

显示：块；对@media没有影响（最大宽度：320像素）

问题描述

1 个解决方案

解决方案1
0 2018-09-25 11:31:14

显示：块； 对@media没有影响（最大宽度：320像素）

问题描述

1 个解决方案

解决方案1 0 2018-09-25 11:31:14

显示：块；对@media没有影响（最大宽度：320像素）

解决方案1
0 2018-09-25 11:31:14