我想这样做是为了让TopBox在顶部,而BottomLeft在TopBox之下但在左边,而BottomRight在topbox之下,但是在右边,这样两者在TopBox下面均匀分享空间
CSS
.textbox {
border: 1px solid #848484;
-moz-border-radius-topleft: 30px;
-webkit-border-top-left-radius: 30px;
border-top-left-radius: 30px;
-moz-border-radius-topright: 30px;
-webkit-border-top-right-radius: 30px;
border-top-right-radius: 30px;
outline: 0;
height: 25px;
display: block;
}
.textboxSquare {
display: inline-block;
}
#TopBox {
width: 300px;
padding-left: 20px;
padding-right: 20px;
}
#BottomLeft {
height: 25px;
width: 150px;
}
#BottomRight {
height: 25px;
width: 150px;
}
HTML
<input class="textbox" id="TopBox" type="text"></div>
<input class="textboxSquare" id="BottomLeft" type="text">
<input class="textboxSquare" id="BottomRight" type="text">
答案 0 :(得分:0)
你的topbox有width : 300px
但是左右填充的总数为width : 340px
.....你还没有考虑到底盒的问题
jsfiddle:http://jsfiddle.net/logintomyk/2gmWh/
#BottomLeft {
height: 25px;
width: 164px;
}
#BottomRight {
height: 25px;
width: 164px;
}
答案 1 :(得分:0)
John Kurlak的解决方案似乎是您想要的,这是一个稍微灵活的版本。 您可以更改容器的宽度,其他框将缩放以匹配:
http://jsbin.com/AqoXECeB/1/edit?html,css,output
请记住,当您添加填充或边距时,您必须相应地调整大小。
<强> HTML 强>
<div id="container">
<input class="textbox" id="TopBox" type="text" />
<input class="textboxSquare" id="BottomLeft" type="text" /><input class="textboxSquare" id="BottomRight" type="text" />
</div>
<强> CSS 强>
* { margin: 0; padding: 0; }
.textbox {
border: 1px solid #848484;
-moz-border-radius-topleft: 30px;
-webkit-border-top-left-radius: 30px;
border-top-left-radius: 30px;
-moz-border-radius-topright: 30px;
-webkit-border-top-right-radius: 30px;
border-top-right-radius: 30px;
outline:0;
height:25px;
display: block;
box-sizing: border-box;
}
#container {
width: 300px;
padding-left:20px;
padding-right:20px;
}
#TopBox {
width: 100%;
}
.textboxSquare {
display:inline-block;
box-sizing: border-box;
height:25px;
width: 50%;
}