基于div表单模拟右对齐

基于div表单模拟右对齐

---------------------------------------------------------

----------------------------------------------------------

<div>
<label>客户名称客户名称</label>
<input type="text" />
<div class="button">取消</div>
</div>

近期项目中遇到这样布局的表单结构，只能从现有基础上，进行样式修改
需要：label宽度自适应，右对齐；button按钮紧紧贴着input输入框

现摘出项目结构部分，模仿表单，如下
--------------html----------------
<div>
<label>客户名称客户名称</label>
<input type="text" />
<div class="button">取消</div>
</div>
--------------html----------------

--------------css----------------
.box {
width: 80%;
margin: 0 auto;
padding: 20px 0;
border: 1px #000 solid;
position: relative;
}

.box:after {
content: "";
display: block;
clear: both;
}

.box div {
float: left;
width: 50%;
padding: 10px 0;
height: 50px;
position: relative;
}

.box div .button {
width: 50px;
display: inline-block;
position: absolute;
}

.box input,
.box select {
margin: 0 20px;
}

.box div label {
display: inline-block;
text-align: right;
width: 50%;
white-space: nowrap;
}
--------------css----------------
如果按钮是button,就直接在一行显示了
这里考虑到，项目中是用的是div模拟的按钮，所以给 .button{position: absolute;}，记得给父元素设置position: relative;

也可以使用 display: table-row;display: table-cell模拟单元格td进行对齐

详情相关可见附件

下载地址： http://files.cnblogs.com/files/leshao/right%E5%AF%B9%E9%BD%90.rar

感谢：雨安合一，lost等朋友思维碰撞得以完善