请看看这个简单的jsfiddle:
HTML:
<form>
<p>
<input id="I1" value="above left" size="40" />
<input id="I2" value="above right" size="10" />
</p>
<p>
<input id="I3" value="below right" size="10" />
<input id="I4" value="below left" size="20" />
</p>
</form>
的CSS:
form {
overflow: hidden;
border: 3px solid red;
padding: 5px;
}
#I1,
#I2 {
background-color: orange;
float: left;
}
#I3,
#I4 {
background-color: yellow;
float: right;
}
我想要的是红色边框(=表格宽度)自动调整到两个顶部输入的宽度(当然是+填充)。
我希望,第二行输入在第一行下方右对齐,因此“右上方”恰好位于“右下方”之上,“左下方”位于其左侧,如下所示:< / p>
11111111111111111111 2222222
4444444 3333333
这可以在没有桌子的情况下完成吗?
Thx,Armin。
答案 0 :(得分:3)
绝对可以在没有表格的情况下完成:)。您可以为表单设置:
form {
display: inline-block;
padding: ...;
}
这将阻止表单扩展到屏幕的整个宽度。它将与其中的元素一样宽,或者,如果您手动定义其宽度,则与指定的宽度一样宽。
如果您不希望在表单的包含元素中的表单的任何一侧显示任何元素,则可以将其包装在div或其他块级元素中:
<div>
<form>
<!-- Rest of content -->
</form>
</div>
为了删除每个p
上方和下方的间距,根据您的评论,删除其margin-top和margin-bottom,因为它们默认具有边距:
p {
margin-bottom: 0;
margin-top: 0;
}
答案 1 :(得分:0)
我已经更新了这个答案。可能这是你需要的,但还有其他选择,但我不认为是这个问题的范围。
CSS代码:
form {
overflow: hidden;
border: 3px solid red;
padding: 5px;
width: 400px; // limites de form size
}
#I1,
#I2 {
position: absolute;
background-color: orange;
}
#I3,
#I4 {
position: absolute;
background-color: yellow;
}
p {
display: block;
border: 1px solid blue;
position: relative;
height: 2em;
}
#I1,
#I4 {
right: 25%;
}
#I2,
#I3 {
right: 0;
}
请在此处查看完整代码:https://jsfiddle.net/uv8yrrav/18/
希望这有帮助!
答案 2 :(得分:0)
我已经组织并清理了您的代码。使div调整其内容的方法是使用display: inline-block
。我还修复了填充问题,所以现在整个内容被填充到5px。
HTML:
<form>
<p>
<input id="I1" value="above left" size="40" />
<input id="I2" value="above right" size="10" />
</p>
<p>
<input id="I3" value="below right" size="10" />
<input id="I4" value="below left" size="20" />
</p>
</form>
CSS:
.border {
border: 3px solid red;
padding: 5px;
display: inline-block;
}
#I1 {
background-color: orange;
}
#I2 {
background-color: yellow;
}
.top-block,
.bottom-block {
width: 100%;
}