我正在寻找一种方法，让某些div（用于按钮）的宽度在我定义更多或更少按钮时自动改变。
我得到的代码只是一个简单的菜单。 可以在这里找到。
如果有一种方法可以得到这样的解决方案（为创建更大的菜单时节省工作）？
CSS:
/*Main Container*/
.mc {
float: left;
width: 100%;
position: absolute;
}
/*Menu Button*/
.mb {
width: 90%;
height: 4%;
padding: 10px 12px;
font-size: 14px;
text-align: center;
cursor: pointer;
color: #000000;
border: none;
border-radius: 14px;
margin: 4px;
opacity: 0.5;
}
.row:after {
content: "";
display: table;
clear: both;
}
/*Columns*/
.c1 {
float: left;
width: 12.5%;
}
HTML
<html>
<head>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<div class="mc">
<div class="row">
<div class="c1">
<form>
<input target="_self" type="button" class="mb" value="Button 1" onclick="window.open('#')">
</form>
</div>
<div class="c1">
<form>
<input target="_self" type="button" class="mb" value="Button 2" onclick="window.open('#')">
</form>
</div>
<div class="c1">
<form>
<input target="_self" type="button" class="mb" value="Button 3" onclick="window.open('#')">
</form>
</div>
<div class="c1">
<form>
<input target="_self" type="button" class="mb" value="Button 4" onclick="window.open('#')">
</form>
</div>
<div class="c1">
<form>
<input target="_self" type="button" class="mb" value="Button 5" onclick="window.open('#')">
</form>
</div>
<div class="c1">
<form>
<input target="_self" type="button" class="mb" value="Button 6" onclick="window.open('#')">
</form>
</div>
<div class="c1">
<form>
<input target="_self" type="button" class="mb" value="Button 7" onclick="window.open('#')">
</form>
</div>
<div class="c1">
<form>
<input target="_self" type="button" class="mb" value="Button 8" onclick="window.open('#')">
</form>
</div>
</div>
</div>
</body>
</html>
进一步的细节:我把这个作为我自己使用的一个项目。 这将是一个私人摄影博客，目前是一种方式，体验如何一页网页设计是创建和获取知识，为未来的网页发展。
使用flex可以轻松完成
HTML
<div class="row">
<div class="col">
<button>Hey</button>
</div>
<div class="col">
<button>Hi</button>
</div>
<div class="col">
<button>Hoop</button>
</div>
</div>
CSS
.row {
display: flex
}
.col {
width: 100%;
}
button {
width: 100%
}
