<分区>
<分区>
在我的网页上应该有一个带有方形按钮的面板(在左侧，屏幕宽度的 25%)。
它应该是这样的:
My UI's design
但目前这些按钮是水平拉伸(stretch)的。我需要以某种方式垂直拉伸(stretch)它们。
我尝试设置 min-width: 100%; height: auto 使 height=width，但它什么也没做。还尝试使用 jquery 来均衡它们 - 仍然没有。
这是我的代码:
#left_panel {
float: left;
width: 25%;
text-align: center;
}
.btn {
border-radius: 25px;
padding: 1%;
margin: 1%;
background-color: green;
}
.item {
border-radius: 10px;
float: right;
width: 71%;
padding: 1%;
margin: 1%;
background-color: grey;
}
checkbox {
display: inline-block;
width: auto;
}
.name {
display: inline-block;
background-color: white;
width: auto;
}
.del {
border-radius: 25px;
display: inline-block;
float: right;
background-color: red;
width: auto;
}<div id="left_panel">
<div class="btn" id="open">Open</div>
<div class="btn" id="add">Add</div>
<div class="btn" id="info">Info</div>
</div>
<div id="list">
<!--space for list-->
</div>最佳答案
您可以使用 padding-bottom: 100% 方法使它们成为正方形。
#left_panel {
float: left;
width: 25%;
text-align: center;
}
.btn {
border-radius: 25px;
padding: 1%;
margin: 1%;
background-color: green;
position: relative;
}
.btn span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn::after {
content: '';
display: block;
padding-bottom: 100%;
}
.item {
border-radius: 10px;
float: right;
width: 71%;
padding: 1%;
margin: 1%;
background-color: grey;
}
checkbox {
display: inline-block;
width: auto;
}
.name {
display: inline-block;
background-color: white;
width: auto;
}
.del {
border-radius: 25px;
display: inline-block;
float: right;
background-color: red;
width: auto;
}<div id="left_panel">
<div class="btn" id="open"><span>Open</span></div>
<div class="btn" id="add"><span>Add</span></div>
<div class="btn" id="info"><span>Info</span></div>
</div>
<div id="list">
<!--space for list-->
</div>关于html - 为什么我不能让按钮的高度等于它们的宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52312419/