gpt4 book ai didi

html - 有没有跨浏览器的方法来阻止 HTML 表单元素与它们的容器重叠?

转载 作者:行者123 更新时间:2023-11-28 02:16:57 25 4
gpt4 key购买 nike

大约一年前,stackoverflow 上有人问了一个关于如何水平对齐 input 和 textarea 元素的问题:input width vs textarea width

我有一些 HTML + CSS,我正在尝试精确地执行此操作,但我发现无论我使用何种 CSS 重置和基于像素的精确宽度定义的组合,我都无法在我的页面上获取元素页面在右侧对齐(左对齐会自动发生)。这是一些简单的演示代码。

<!doctype html>
<html>
<head>
<style type="text/css">
* {margin: 0; padding: 0;} /* primitive reset */
body {width: 200px; margin-left:auto; margin-right: auto;
border: 1px solid black;}
input {border: 1px solid black; width: 200px;}
div {border: 1px solid black;}
textarea {border: 1px solid black; width: 200px;
}
</style>
</head>
<body>
<input type="text" value="textinput">
<div>div</div>
<textarea>textarea</textarea>
</body>
</html>

如果我改变 input 和 textarea 的宽度,我可以让它们在 chrome 中对齐。但是他们不会在 Firefox 中排队。反之亦然。默认情况下,即使重置了 css,一个或另一个元素也会与右侧的包含 div 重叠。如果需要,您可以删除我设置的边框并使用浏览器各自的 DOM 检查器。

我花了太多时间来解决这个问题,所以我想知道这里是否有人知道我正在尝试做的事情是否可行。

最佳答案

这确实令人沮丧。您最好的选择是从输入元素中删除边框并将它们包装在另一个带有边框的固定宽度元素中,例如一个<div> .

<!DOCTYPE html>
<html>
<head>
<title>SO question 3577146</title>
<style>
* { margin: 0; padding: 0; } /* primitive reset */
body { width: 200px; margin: 0 auto; border: 1px solid black; }
div { width: 200px; border: 1px solid black; }
input { width: 198px; border: 0; }
textarea { width: 198px; border: 0; }
</style>
</head>
<body>
<div><input type="text" value="textinput"/></div>
<div>div</div>
<div><textarea>textarea</textarea></div>
</body>
</html>

Here's a jsfiddle demo .

关于html - 有没有跨浏览器的方法来阻止 HTML 表单元素与它们的容器重叠?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3577146/

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