gpt4 book ai didi

html - 使 2 个相邻(并排)的字段集彼此相邻

转载 作者:搜寻专家 更新时间:2023-10-31 22:29:28 26 4
gpt4 key购买 nike

我需要你的帮助。

我的想法是在页面上有 2 个字段集,它们占页面的 100% 宽度并且彼此相邻。选择的浏览器是(IE10)

现在,他们似乎并没有遵守我希望他们做的事情。

就目前而言,它们仍然堆叠在一起。

我怎样才能很好地并排显示字段集?

这是正在发生的事情的快速图片: enter image description here

这是标记:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<style type='text/css'>
fieldset {
padding: 3px;
width: 300px;
float: left;
}
#field1 {
width: 70%;
}
#field2 {
width: 30%;
}
label {
float:left;
font-weight:bold;
}
input {
width: 100%;
box-sizing:border-box;
}
</style>

</head>
<body>
<fieldset id="field1">
<legend>Message Centre</legend>
<input type="text">
</fieldset>
<fieldset id="field2">
<legend>File Number</legend>
<input type="text">
</fieldset>

</body>

</html>

最佳答案

是的,我做了几乎相同的事:p

box-sizing 是解决方案!

字段集: http://jsfiddle.net/8dSnw/5/

input{
float: left;
width: 50%;
display: inline-block;
box-sizing: border-box;
}

仅输入:

http://jsfiddle.net/8dSnw/3/

关于html - 使 2 个相邻(并排)的字段集彼此相邻,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22868968/

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