使一组按钮填充父div的整个宽度

时间:2016-11-23 13:40:42

标签: html css button width navbar

我有一个宽度为360px的小面板。在面板的顶部有一个导航栏,由当前3个按钮组成(尽管数字无关紧要)。我希望按钮填充div的整个宽度,并根据内部单词的长度占用更多或更少的空间。目前我只知道如何将按钮的宽度设置为一个值,但是如果我添加一个按钮,则需要手动更改这些值。

what it currently looks like

这就是我现在所拥有的,但显然它看起来很糟糕。如何使第一个按钮不宽,第二个按钮更宽,并且所有三个按钮一起占据面板的整个宽度?

这是我的代码:

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;

}

谢谢!

4 个答案:

答案 0 :(得分:4)

我会选择Flexbox解决方案:

&#13;
&#13;
.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;}
&#13;
<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>
&#13;
&#13;
&#13;

More information about flex

A complete guide to flexbox

答案 1 :(得分:0)

这是.buttons paddingfont-sizewidth之间的平衡。如果您向with: 33%;提供当前padding (20px),则无效。如果你设置了padding: 0px;,但是looong文本会溢出,将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>

答案 2 :(得分:0)

你可以删除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>

答案 3 :(得分:-1)

你可以应用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>