Question

Chrome不会在页面刷新时呈现左填充空白，但是当我取消选中并使用chrome开发工具检查左填充属性时，Chrome可以使用。有人可以帮助我了解这里发生的事情。

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; */
}

Answer 1

我成功了，这是因为当.menu-list> div没有宽度时，我们可以使用display flex，然后给它们填充。

我使用了显示内联块，请参见此处。

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

CSS flexitem的paddingleft属性在刷新页面时不起作用

1 个答案: