gpt4 book ai didi

HTML, CSS - 使文本框宽度相同

转载 作者:太空宇宙 更新时间:2023-11-03 20:11:40 24 4
gpt4 key购买 nike

我有这个页面,第一行有 2 个文本框,第二行有一个文本框。我想让它们的宽度相同,下面的代码在 chrome 中工作正常,但在 firefox 和 IE 中(在 IE9 中测试)宽度不同。我怎样才能使宽度相同在所有浏览器中?

JS Bin

<!doctype html>
<html>
<body>
<form>
<input type="text" name="cnop" size="2"/><input type="text" name="cno" style="width:122px;"/><br>
<input type="text" name="cpono"/>
</form>
</body>
</html>

Chrome

enter image description here

火狐

enter image description here

最佳答案

您可以使用 box-sizing: border-box; 使输入宽度的对齐更容易跨浏览器(它考虑了填充、边框和内容宽度)。它还使预处理器(如 Sass)中的宽度计算变得非常简单。

input[type="text"] {
box-sizing: border-box;
}

input[name="cnop"] {
width: 33px;
}

input[name="cno"] {
width: 122px;
}

input[name="cpono"] {
width: 155px;
}

检查 fiddle :https://jsfiddle.net/mshtacea/

关于HTML, CSS - 使文本框宽度相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31330396/

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