我有一个表格，当我将嵌套元素的样式设置为 width:80% 时，左列之一会缩小。该列缩小并截断输入元素的右边缘。您可以通过从输入元素中删除样式来了解我在说什么。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<table width="100%" border="1">
<tr>
<td>
<input type="text" style="width: 80%;" />
</td>
<td>
Lots of text to make the right cell expand.
Lots of text to make the right cell expand.
Lots of text to make the right cell expand.
Lots of text to make the right cell expand.
Lots of text to make the right cell expand.
Lots of text to make the right cell expand.
Lots of text to make the right cell expand.
Lots of text to make the right cell expand.
Lots of text to make the right cell expand.
</td>
</tr>
</table>
</body>
</html>
我有一种感觉，这是因为列的大小是根据子项确定的，但是通过根据它的父项确定元素的大小，我创建了一个“第 22 条军规”。
有人可以告诉我发生了什么，以及我如何保持相同的列宽，并将我的元素调整到其宽度的 80%？
最佳答案
您遇到的问题是因为您正在设置 <input>的宽度是没有宽度的单元格的百分比。因此单元格变小以弥补另一个单元格上的文本，一旦完成，输入将获得剩余内容的 80%。
你的选择:
1) 为 <input> 设置宽度(以像素为单位)领域。
2) 为 <td> 设置宽度(以像素/百分比为单位) .
处理您的评论:当您删除样式时，它变大的原因是它会恢复到浏览器的默认大小 <input>元素，大于单元格中剩余内容的 80%。
关于html - 当我将子元素设置为 "width:80%"时，为什么 <td> 会缩小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/463018/