display:block;
不适用于最大宽度:320像素。
背景变为绿色,但<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 Us</a></li>
</ul>
</header>
</body>
最佳答案
每当您使用float时,请务必清除它。在您的情况下,您在Web中使用了float,但在320媒体查询中尚未清除它,请使用float清除它:清楚的
关于html - 显示:块;对@media没有影响(最大宽度:320像素),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52492467/