我有一个小面板，宽度为360px。面板顶部有一个导航栏，该导航栏当前包含3个按钮（不过，数字并不重要）。我希望按钮填充div的整个宽度，并根据内部单词的长度占用更多或更少的空间。目前，我只知道如何将按钮的宽度设置为一个值，但是如果我添加一个按钮，则需要手动更改这些值。
这就是我现在所拥有的，但是显然看起来很可怕。如何使第一个按钮的宽度减小，第二个按钮的宽度变宽并使所有三个按钮一起占据面板的整个宽度？
这是我的代码：
HTML：
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<link type="text/css" rel="stylesheet" href="test.css"/>
</head>
<body>
<div class="panel">
<ul class="nav">
<li class="buttons">SHORT</li>
<li class="buttons">LOOOOOOOOOOONG</li>
<li class="buttons">...</li>
</ul>
</div>
</body>
</html>
CSS：
.panel {
background-color: grey;
width: 360px;
height: 600px;
position: relative;
border: 1px solid black;
}
.nav {
padding: 0;
margin: 0;
}
.buttons {
float: left;
display: block;
padding: 0px 20px;
height: 40px;
width: 60px;
background-color: #666666;
border-right: 1px solid black;
border-bottom: 1px solid black;
text-align: center;
line-height: 40px; …