logo标签列表

使一组按钮填满父级div的整个宽度。

htmlcssbuttonwidthnavbar
5
我有一个宽度为360px的小面板。在面板顶部，有一个导航栏，目前由三个按钮组成（数量不重要）。我希望按钮能够填满整个div，并根据内部单词的长度占用更多或更少的空间。目前，我只知道如何将按钮的宽度设置为一个固定值，但如果我添加一个按钮，则需要手动更改这些值。
以下是我的代码：
HTML： ```html
```
CSS： ```css .panel { width: 360px; }
.nav { display: flex; }
.nav button { flex-grow: 1; } ```
这是我现在拥有的，但显然它看起来很糟糕。我该如何让第一个按钮变窄，第二个按钮变宽，并且所有三个按钮一起占据面板的整个宽度？
<!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个回答
9
我建议您采用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>

更多关于flex的信息

Flexbox完全指南

2
这个极力推荐！ - Syden
0

这是在 .buttons 的 padding、font-size 和 width 之间达成平衡的过程。如果你使用当前的 padding (20px) 设置 width: 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>

0

您可以移除 Width（它将由其内容设置）并设置 display:inline-block（而不是float）来实现此目的。尝试这个。

.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>

在这种情况下，@Pete认为flexbox更可取。 - RizkiDPrast
我能找到的最接近的方法是使用min-width，但它不像flex那样灵活。我已经编辑了答案，请您看一下。 - RizkiDPrast
明白了。对我来说，玩CSS有点棘手 :) 但是通过flex，我们只需使用flex-grow:1，就可以如此优雅。 - RizkiDPrast
Flex是未来！即使大家最喜欢的Bootstrap垃圾堆也在转向Flex！ - Pete
什么...!!! 我提到了你 @Pete，现在才意识到我正在和你说话谢谢 Pete :) - RizkiDPrast
显示剩余2条评论
-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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接