如何解决将“按钮高度”设置为父元素的100%,而不设置父高度
我有一个div,该div依次包含一个按钮,一个表和另一个按钮,我希望这些按钮位于表的左侧和右侧,并具有与表相同的高度。这些按钮应该是后退按钮,可以更改表中的数据。
我已经接近要在div上使用float: none
并在所有项目上使用float: left
了,它们可以正确对齐,但是当我在按钮上尝试height: 100%
时,它们会在整个窗口,这不是我想要的。
在怪癖模式下,我可以实现类似的功能
div {
height: 50%;
}
button {
height: 100%;
}
table {
display: inline-block;
}
之所以在意外测试中起作用,是因为我的屏幕尺寸匹配,因此可以按我的意愿显示,但是当我调整窗口大小或添加<!DOCTYPE html>
时,情况就改变了。
是否可以使用不使用display: flex
的方法来完成此任务?
HTML:
<html>
<head>
<Meta charset="utf-8">
<title>Under construction</title>
<link rel="stylesheet" href="../css/stylesheet.css" />
</head>
<body>
<div>
<button>←</button>
<table style="border: none">
<thead><th>a</th><th>b</th><th>c</th></thead>
<tbody>
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>D</td><td>E</td><td>F</td></tr>
<tr><td>G</td><td>H</td><td>I</td></tr>
</tbody>
</table>
<button>→</button>
</div>
</body>
</html>
CSS:
td {
background: green;
border-radius: 7px;
}
解决方法
position:absolute
似乎是这里的 only 解决方案:
td {
background: green;
border-radius: 7px;
}
.box {
border:1px solid red;
position:relative;
display:inline-block;
padding:0 50px; /* 50px is considered to be the width of button so adjust it based on your case*/
}
.box button {
position:absolute;
top:0;
height:100%;
left:0;
}
.box button:last-of-type {
left:auto;
right:0;
}
<div class="box">
<button>←</button>
<table style="border: none">
<thead>
<th>a</th>
<th>b</th>
<th>c</th>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
<td>I</td>
</tr>
</tbody>
</table>
<button>→</button>
</div>
或者您可以考虑其他表结构,但是您需要调整HTML代码:
.box table td {
background: green;
border-radius: 7px;
}
.box {
border: 1px solid red;
border-spacing: 0;
}
.box,.box > tbody,.box > tbody > tr > td{
height:100%;
}
.box button {
height: 100%;
}
<table class="box">
<tr>
<td><button>←</button></td>
<td>
<table style="border: none">
<thead>
<th>a</th>
<th>b</th>
<th>c</th>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
<td>I</td>
</tr>
</tbody>
</table>
</td>
<td><button>→</button></td>
</tr>
</table>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。