Question

我在设计某些网络表单时遇到了麻烦。在我的情况下，表单继承了body元素的字体大小。在示例中，它被设置为仅用于说明问题。

有这两种形式：

<form>
    <input type="text" />
    <input type="submit" />
</form>

<form style="font-size:24px">
    <input type="text" />
    <input type="submit" />
</form>

可以预期这些形式看起来与形式的元素在两种情况下具有相同尺寸相同。但是，表单的高度以及输入文本和提交按钮之间的空间不同。有人可以解释发生了什么以及如何防止这种尺寸变化？（我不喜欢将表单的字体大小设置为0px）

Answer 1

如果您希望有更大的文字，但又不想打扰任何元素，那么：

在<div style="position:relative;">中扭曲所有内容，或者提供<body> position: relative;。
然后将文字换成<div style="position: absolute;">

这应该使您的文本“不受欢迎”，这意味着定位和调整文本大小不应影响任何未定位的内容或布局。此外，您可以使用z-index将文本“浮动”在非定位（或更常见的“静态”）内容上。有关详细信息，请参阅 here

即使元素的大小相同，表单的字体大小也会更改表单的大小

1 个答案: