我有一个宽度为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;
}
谢谢!
答案 0 :(得分:4)
我会选择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;}
&#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;
答案 1 :(得分:0)
这是.buttons
padding
,font-size
和width
之间的平衡。如果您向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>