javascript - 导航栏元素不在单独的行上

Question

我正在尝试构建导航栏，但遇到了一些问题:

1. 我不能让品牌和口号类分开行
2. 导航栏中的“下拉 ini”和“提示”选项卡之间存在微小的恼人间隙(当宽度超过 768 像素时)

使用 break 标签甚至不能解决问题 1。flex-wrap of none 也会失败。问题 2 不是空白问题，因此没有理由出现未知的差距。非常感谢这里的任何建议，谢谢。

function myFunction() {
            var x = document.getElementsByClassName("dropdown-content");
            if (x.className === "dropdown-content") {
                x.className += " responsive";
            } else {
                x.className = "dropdown-content";
            }
        }

body { margin: 0; }

#navbar {
    width: 100%;
    height: 100px;
    background: green;
    padding: 0% 5%;
    box-sizing: border-box;
}
#navbar img {
    width: auto;
    height: 80%;
    float: left;
}
#navbar a:hover {
    background: red;
}
#branding {
    float: left;
    background: yellow;
    height: 100%;
    width: auto;
    display: flex;
	justify-content: center;
	align-items: center;
}
.brand {}
.slogan {}
.navlinks {
    float: right;
    height: 100%;
    background: pink;
    display: flex;
	justify-content: center;
	align-items: center;
    padding: 0 15px;
}
.dropdown {
    float: right;
    overflow: hidden;
}
.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 15px;
    background-color: red;
    height: 100px; /* PREFER 100% BUT DOESNT WORK */
    display: block;
}
.dropdown:hover .dropbtn {
    background: yellow;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}
.dropdown-content a:hover {
    background-color: #ddd;
}
.dropdown:hover .dropdown-content {
    display: block;
}




#menu {
    display: none;
}
.responsive {
    display: block;
}

@media handheld, screen and (max-width: 768px) {
    .navlinks, .dropdown { display: none; }
    #menu {
    display: grid;
}
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="navbar">
        <a href="#"><img src="assets/img/logo.png"></a>
        <div id="branding">
            <a href="#" class="brand">brand name</a>
            <a href="#" class="slogan">text slogan goes here</a>
        </div>
        <a href="javascript:void(0);" class="navlinks" id="menu" onclick="myFunction()">&#9776;</a>
        <a href="#" class="navlinks">Tips</a>
        <div class="dropdown">
            <button class="dropbtn">dropdown ini 
                <i class="fa fa-caret-down"></i>
            </button>
            <div class="dropdown-content">
                <a href="#">first choice</a>
                <a href="#">second choice</a>
            </div>
        </div>
    </div>

Answer 1

 #branding {
    float: left;
    background: yellow;
    height: 100%;
    width: auto;
    display: flex;
    flex-direction: column; //Add Flex-Direction
    justify-content: center;
    align-items: center;
};

1. 将 Margin: 0 添加到您的按钮。 Safari 必须有一些默认属性；