2

HTML 代码:

<div id="nav">
    <div id="home_menu">
        <a href="home.php">Home</a>
        <ul>
            <li>
                <a href="feed.php">Feed</a>
            </li>
            <li>
                <a href="">Notifications</a>
            </li>
        </ul>
    </div>
    <div>
        <a href="profile.php">Profile</a>
        <ul>
            <li>
                <a href="">Settings</a>
            </li>
            <li>
                <a href="logout.php">Logout</a>
            </li>
        </ul>
    </div>
</div>

造型:

#nav {
    float:right;
    margin-top: 12px;
    width: 200px;
    display:box;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    border: 1px solid green;
}

该代码在 chrome 上完美运行,但在 mozilla 上方向是垂直的而不是水平的。请帮忙!

4

2 回答 2

2

@Anubhav Awasthy Just Put /* autoprefixer: off */ 正在消失的代码行上方,它将被构建忽略。

例如。/* 自动前缀:关闭 */ -webkit-box-orient: vertical;

于 2018-07-02T14:03:27.663 回答
1

添加display: flex;到您的班级

(显示:-moz-box;是旧语法)

小提琴

尝试为所有浏览器获取正确语法时,一个很好的起点是http://the-echoplex.net/flexyboxes/ [尽管它们为您生成的某些属性不是必需的,可以删除]

于 2013-07-25T11:42:59.047 回答