Question

我正在尝试学习HTML / CSS并在添加时找到它 display：-webkit-flex;到CSS，导航中的最后一个div被推送到下一行。当我通过简单地删除行禁用弹性框时，div跳回到（内联块）导航。我目前正在野生动物园进行测试

该页面看起来应该在Firefox中，但不是在Safari中，有任何建议，为什么？

以下是代码：

if ($quantity >= 1000000) {
    $quantity = 99999;
}

这是我写的所有CSS，还有一个我没有包含的CSS重置部分。

<body>
    <header> 
        <div class="logo"> 
            <h1>Guitar site</h1>
        </div>
        <nav>
            <div class="leftMenu">
                <a href="index.html" class="menuButton">Home</a>
            </div>
            <div class="centerMenu">
                <div>
                    <a href="beginner.html" class="link">Beginner</a>
                </div>
                <div>
                    <a href="advanced.html" class="link">Advanced</a>
                </div>
                <div>
                    <a href="tips.html" class="link">Tips</a>
                </div>
            </div>
            <div class="rightMenu">
                <a href="contact.html">Contact</a>
            </div>
        </nav>  
    </header>
    <h1> test</h1>
</body>

Answer 1

flex布局背后的主要思想是让容器能够改变其项目的宽度/高度（和顺序），以最好地填充可用空间。

所以你的案例中的主要容器是nav元素;您必须为display:flex元素定义nav属性。并且您的导航HTML结构格式不正确。

检查Demo，这是您修改后的CSS代码。

nav{display: -webkit-flex;
  display: -webkit-box; /*for older safari version*/
  display: flex;}

.leftMenu,
.rightMenu,
.centerMenu {
    text-align: center;
     border-bottom: solid .1em;
  justify-content: space-around;
    /*display: inline-block;
    display: -webkit-flex;*/
}

.leftMenu,
.rightMenu {
    background-color: #fbfbfb;
    height: 2em;
    padding-top: 1em;
    width: 17.5%;
    /*-webkit-justify-content: space-around;*/
}

/*.leftMenu {
    float: left;
}


.rightMenu {
    float: right;
}*/

.centerMenu a {
    display: block;
    height: 2em;
}

.centerMenu  {
    width: 65%;
    height: 6em;
    background-color: #86acbe;
   /* -webkit-flex-direction: column;
    -webkit-justify-content: space-around;*/
}

<header> 
    <div class="logo"> 
        <h1>Guitar site</h1>
    </div>
    <nav>
        <div class="rightMenu">
            <a href="index.html" class="menuButton">Home</a>
        </div>
        
            <div class="rightMenu">
                <a href="beginner.html" class="link">Beginner</a>
            </div>
            <div class="rightMenu">
                <a href="advanced.html" class="link">Advanced</a>
            </div>
            <div class="rightMenu">
                <a href="tips.html" class="link">Tips</a>
            </div>
       
        <div class="rightMenu">
            <a href="contact.html">Contact</a>
        </div>
    </nav>  
</header>
<h1> test</h1>

display：webkit-flex将inline-block div推送到Safari中的下一行

1 个答案: