Question

我有一个表，当我将嵌套元素的样式设置为 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>

我有一种感觉，因为列的大小是基于孩子的，但是通过根据它的父级调整元素的大小，我创建了一个'catch 22'。

有人可以告诉我发生了什么，以及如何保持相同的列宽，并将我的元素大小调整为宽度的80％？

Answer 1

您遇到的问题是因为您将<input>的宽度设置为没有宽度的单元格的百分比。因此，单元格变得越来越小以弥补其他单元格上的文本，一旦完成，输入就会得到80％的剩余。

您的选择：
1）设置<input>字段的宽度（以像素为单位） 2）为<td>设置宽度（以像素/百分比表示）。

解决您的评论：当您删除该样式时，它变大的原因是因为它返回到浏览器的<input>元素的默认大小，大于80在细胞中剩余的百分比。

Answer 2

您可以为第一列指定明确的宽度：

<table width="100%" border="1">
    <tr>
            <td width="20%">
                    <input type="text" style="width: 80%;" />
            </td>

当我将子元素设置为“width：80％”时，为什么会缩小？

2 个答案: