Chrome 不会在页面刷新时呈现 padding-left，但当我使用 chrome 开发工具取消选中并检查 padding-left 属性时可以正常工作。有人可以帮助我了解这里发生的事情。
Chrome 版本:版本 78.0.3904.108(官方构建)(64 位)
有问题的代码部分:
<div class='header-col3'>
<div class='header-menu-container'>
<div class='menu-list'>
<div class='search-box'><div></div></div>
<div class='share-box'><div></div></div>
<div class='cart-box'><div></div></div>
<div class='login-box'><div></div></div>
</div>
</div>
</div>
下面是我完整的html和css代码
html:
<!DOCTYPE html>
<html>
<head>
<title>Cricdl - header</title>
<link rel='stylesheet' type='text/css' href='./static/css/main.css'/>
<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Helvetica"> -->
<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Helvetica+Neue|Helvetica"> -->
</head>
<body>
<header id='header-banner'>
<div class='header-container'>
<div class='header-container-flex'>
<div class='header-col1'>
<div class='header-logo-container'>
<div class='dummy-logo'></div>
</div>
</div>
<div class='header-col2'>
<div class='header-nav-container'>
<nav>
<a href="#">
<span>Players</span>
</a>
<a href="#">
<span>Teams</span>
</a>
<a href="#">
<span>Series</span>
</a>
<a href="#">
<span>Stats</span>
</a>
</nav>
</div>
</div>
<div class='header-col3'>
<div class='header-menu-container'>
<div class='menu-list'>
<div class='search-box'><div></div></div>
<div class='share-box'><div></div></div>
<div class='cart-box'><div></div></div>
<div class='login-box'><div></div></div>
</div>
</div>
</div>
</div>
</div>
</header>
</body>
</html>
CSS 代码:
* {
margin: 0;
}
.dummy-logo {
width: 60px;
height: 60px;
margin: auto;
background-color: cornflowerblue;
}
#header-banner {
width: 100%;
height: 100px;
background-color: #fff;
border-bottom: 1px solid rgba( 0,0,0,0.08 );
}
.header-container {
padding-top: 1.1%;
border: 1px solid black;
}
.header-container-flex {
display: flex;
align-items: center;
border: 1px solid black;
}
.header-col1, .header-col3 {
flex: 1;
border: 1px solid black;
}
.header-col2 {
flex: 2;
border: 1px solid black;
}
.header-nav-container nav a {
display: inline-block;
color: #505050;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
text-decoration: none !important;
text-align: center;
padding-left: 10%;
}
.menu-list {
display: flex;
/* border: 1px solid black; */
}
.menu-list > div {
/* border: 1px solid black; */
padding-left: 10%;
}
.menu-list > div > div{
box-sizing: border-box;
height: 20px;
width: 20px;
background-color: tomato;
border-radius: 2px;
/* border: 1px solid black; */
}
最佳答案
我成功了，因为当 .menu-list > div 没有宽度时使用 display flex，然后给它们填充。
我使用了显示内联 block ，请参见此处。
.menu-list {
font-size: 0; /* to remove the extra PX that display: inline block generates */
}
.menu-list > div {
display: inline-block; /* change this */
padding-left: 10%;
}
编辑 现在我看到高度不是 20px 有一个修复:
.header-col3 {
border: none;
}
.menu-list {
font-size: 0; /* to remove the extra PX that display: inline block generates */
box-sizing: border-box;
border: 1px solid black;
height: 20px;
position: relative;
}
.menu-list > div {
display: inline-block; /* change this */
padding-left: 10%;
box-sizing: border-box;
height: 100%;
}
.menu-list > div > div{
box-sizing: border-box;
height: 100%;
width: 20px;
background-color: tomato;
border-radius: 2px;
display: block;
}
关于html - CSS flexitem 的 paddingleft 属性在页面刷新时不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59086845/