使一组按钮填满父 div 的整个宽度
Posted
技术标签:
【中文标题】使一组按钮填满父 div 的整个宽度【英文标题】：Make a group of buttons fill the whole width of the parent div 【发布时间】：2017-04-07 13:23:10 【问题描述】：我有一个宽度为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;
【问题讨论】：
【参考方案1】：我会为此使用 flexbox 解决方案：
.panel
background-color: grey;
width: 360px;
height: 600px;
position: relative;
border: 1px solid black;
.nav
padding: 0;
margin: 0;
/* add the following */
width:100%;
display:flex;
flex-direction:row;
.buttons
display: block;
padding: 0px 20px;
height: 40px;
background-color: #666666;
border-right: 1px solid black;
border-bottom: 1px solid black;
text-align: center;
line-height: 40px;
/* remove your width and float and add the following */
flex-grow:1;
/*optional*/
.nav li:last-child border-right:none;<div class="panel">
<ul class="nav">
<li class="buttons a">SHORT</li>
<li class="buttons b">LOOOOOOOOOOONG</li>
<li class="buttons c">...</li>
</ul>
</div>More information about flex
A complete guide to flexbox
【讨论】：
这是一个强烈推荐！【参考方案2】：这是.buttonspadding、font-size 和width 之间的平衡。如果你用当前的padding (20px) 给with: 33%;，它将不起作用。如果你设置padding: 0px;，它会但冗长的文本会溢出，设置font-size较低会有所帮助，但它仍然会太紧。
试着稍微调整一下这些东西，看看你是否能找到正确的平衡。
下面的例子：
.panel
background-color: grey;
width: 360px;
height: 600px;
position: relative;
border: 1px solid black;
.nav
padding: 0;
margin: 0;
margin-right: -2px;
.buttons
float: left;
padding: 0px 0px;
height: 40px;
width: 33%;
list-style: none;
background-color: #666666;
border-right: 1px solid black;
border-bottom: 1px solid black;
text-align: center;
line-height: 40px;
font-size: 12px;
<div class="panel">
<ul class="nav">
<li class="buttons">SHORT</li>
<li class="buttons">LOOOOOOOOOOONG</li>
<li class="buttons">...</li>
</ul>
</div>【讨论】：
【参考方案3】：您可以删除Width（将由其内容设置）并设置display:inline-block（而不是浮动）来实现这一点。试试这个。
.panel
background-color: grey;
width: 360px;
height: 600px;
position: relative;
border: 1px solid black;
.nav
margin:0 0;
padding:0 0;
width:100%;
list-style-type: none;
.buttons
display: inline-block;
height: 40px;
padding: 0 5px;
min-width:23.3%;
margin-right: -4px;
background-color: #666666;
border-right: 1px solid black;
border-bottom: 1px solid black;
text-align: center;
line-height: 40px;
<div class="panel">
<ul class="nav">
<li class="buttons">SHORT</li>
<li class="buttons">LOOOOOOOOOOONG</li>
<li class="buttons">...</li>
</ul>
</div>【讨论】：
但是三个按钮并没有占据外部 div 的全部宽度，现在它们之间有一个间隙 weu，在这种情况下，@Pete 更喜欢 flexbox 我能得到的最接近的是给min-width - 但不如flex灵活。我编辑了答案，请看一下。
更好，但我也会注释掉元素之间的空格以删除它们之间的空白
明白了。玩 css 对我来说有点棘手 :) 通过 flex，我们可以只使用 flex-grow:1 来代替优雅【参考方案4】：
您可以应用 33.33% 的宽度并移除边框和内边距
.panel
background-color: grey;
width: 360px;
height: 600px;
position: relative;
border: 1px solid black;
.nav
padding: 0;
margin: 0;
.buttons
float: left;
display: block;
color: #fff;
padding: 0;
height: 40px;
width: 33.33%;
text-align: center;
line-height: 40px;
.buttons.a
background-color: red;
.buttons.b
background-color: green;
.buttons.c
background-color: blue;
<div class="panel">
<ul class="nav">
<li class="buttons a">SHORT</li>
<li class="buttons b">LOOOOOOOOOOONG</li>
<li class="buttons c">...</li>
</ul>
</div>【讨论】：
以上是关于使一组按钮填满父 div 的整个宽度的主要内容，如果未能解决你的问题，请参考以下文章
左边的DIV设定了固定的宽度，右边的DIV如何自适应地填满剩下的屏幕宽度？