gpt4 book ai didi

html - 表单元格溢出尽管框大小 : border-box

转载 作者:太空宇宙 更新时间:2023-11-03 21:05:12 25 4
gpt4 key购买 nike

我想向表格的单元格添加填充,但这会导致表格内的文本、输入等溢出。从其他 Stack Overflow 讨论中,我了解到答案是设置 box-sizing: border-box,但这对我不起作用。

下面是一个说明问题的最小示例。

* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}

table,
th,
td {
border: 1px solid black;
padding: 1.5%;
}

table {
border-collapse: collapse;
}
<table>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td><input value=1></td>
</tr>
</table>

填充为 1.5% 时,输入框会伸出其单元格的右端。如果 padding 更改为 0,则输入框会紧贴。我想保留填充但使输入框适合。

最佳答案

设置输入的宽度以填充表格单元格

input{
max-width: 100%;
}

* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}

table,
th,
td {
border: 1px solid black;
padding: 1.5%;
}

table {
border-collapse: collapse;
}
input {
max-width: 100%;
}
<!DOCTYPE html>
<table>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td><input value=1></td>
</tr>
</table>

编辑:感谢@javier Rey 的更正

关于html - 表单元格溢出尽管框大小 : border-box,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54280521/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com