Question

导航栏带有徽标，段落和三个字体超棒的图标，它们不能覆盖整个宽度，最大宽度为480px。

添加了display flex属性，将flex方向设置为行，边距设置为零，但对我仍然无效。

    @media only screen and (max-width:480px) {
    .navbar {
    width: 100%;
    height: 70px;
    margin: 0;
    display: flex;
    padding: 0.1em;
    align-items: center;
    flex-direction: row;
  }
}

我希望导航栏中的项目能够覆盖整个宽度，而右侧不留空白。

Answer 1

您的代码中有很多问题。右侧的图标相互堆叠，不确定是否需要。
如果不是，则将父项div添加到所有这些图标中，然后将其放在flexbox中。这会将它们连续堆叠。
关于导航栏要覆盖整个宽度，我认为您应该将justify-content: space-between转到您的课程navbar

.navbar {
    background-color: rgb(146, 145, 145);
    max-width: 480px;
    height: 70px;
    margin: 0;
    display: flex;
    padding: 0.1em;
    align-items: center;
    position: relative;
    justify-content: space-between;  /*added line*/
}
/* added code for parent div class*/
.icons {
    display: flex;
    flex-direction: row;
}

<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet"/>
<nav class="navbar">
    <div class="navbar-logo-onphone"> <img src="logo.png" alt="smart-biz logo" /> </div>
    <div class="navbar-p-onphone">
        <p>The best<br> online sellers</p>
    </div>
    <div class="icons"> <!-- added parent div -->
        <div> <span class="nav-icon-cart"><i class="fas fa-cart-plus"></i> </span>
            <div class="cart-items-onphone">0</div>
        </div>
        <div> <span class="nav-icon-search-onphone"> <i class="fas fa-search"></i></span>
        </div>
        <div>
            <span class="nav-icon-onphone"> <i class="fas fa-bars"></i></span>
        </div>
    </div>
</nav>

希望有帮助。干杯！

导航栏宽度设置为最大宽度480px

1 个答案: