<div class="nav"> <div class="container"> <ul> <a href="www.google.com"<li><button class="Menu">MENU</button></li></a> <a href="www.google.com"<li><button class="TITLE">TITLE</button></li></a> <a href="google.com"<li><button class="Sign Up">SIGN UP</button></li></a> <a href="google.com"<li><button class="Log in">LOG IN</button></li></a> </ul> </div> </div> .nav{ color: #5a5a5a; font-size: 15px; font-weight: normal; padding: 15px 15px 5px 5px; word-spacing: 3px; } .nav li { display: inline; } .nav button { background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline: none; } .nav a{ color: inherit; }

【解决方案1】：

你可以试试这个小提琴 demo

在此我已经管理了您的 li 的结构，并根据您的描述进行了设计，希望对您有所帮助

.col1
{ 
margin:0;
padding:0;
float:left; 
width:50%;
}

【讨论】：

【解决方案2】：

快速解答

如果您想要类似 Uber 的网站，您可能需要将菜单与右侧的按钮分开。

其他说明

此外，HTML5 指定了特殊标签，因此代码更具可读性和组织性，例如用于保存主菜单的 <nav> 标签。 <div> 没有传达容器的用途。

要做你想做的事，这里有一个待办事项清单：

修复你的错误（<a href="somewhere"<li><button>foobar</button></li></a> 实际上是一个错误，因为在你的开头<a> 标签的末尾缺少右括号>）
将您的元素分成一个菜单、一个标题和几个用户帐户按钮

代码

这是一个很好的例子，说明如何重构 HTML：

<h2 class="top-title">Title</h2>
<nav>
    <button id="toggle-menu">Menu</button>
    <ul>
        <li><a href="google.com">Menu 1</a></li>
        <li><a href="google.com">Menu 2</a></li>
    </ul>
</nav>
<div class="user-buttons">
    <button>Log in</button>
    <button>Sign up</button>
</div>

这是一个快速破解的 CSS 代码，您可以开始使用：

h2 {
    display: inline-block;
    width: 100vw;
    text-align: center;
    margin: 0;
    position: absolute;
    z-index: -1;
}
nav {
    float: left;
}
nav ul {
    list-style-type: none;
    padding: none;
    position: absolute;
}
nav ul a {
    text-decoration: none;
    text-transform: uppercase;
    color: inherit;
}
div.user-buttons {
    float: right;
}

添加一些 Javascript，然后瞧：

$(function() {
    $("nav ul").hide();
    $("#toggle-menu").click(function() {
        $("nav ul").toggle();
    });
});

JSFiddle example.

【讨论】：