Question

我有3个div：连续2个，第3个在它们下面。我希望在文本框上面的TextBox正确对齐。

你有解决方案吗？

非常感谢！

.form-group {
    float: left;
    width: 50%;
    height:50px;
}
    .form-group label {
        float:left;
        width: 130px;
    }
    .form-group input {
        float:left;
        width: 230px;
    }

<div class="form-group">
    <label for="name">Name</label>
    <input id="name" type="text" />
</div>
<div class="form-group">
    <label for="family">Family</label>
    <input id="family" type="text" />
</div>
<div class="form-group" style="width:100%;">
    <label for="address">Address</label>
    <input type="text" id="address" style="width:67%"/>
</div>

在完整页面上显示正常：http://aug.imghost.us/QWQo.jpg但是当页面大小发生变化时，框中的内容不能很好地对齐：http://aug.imghost.us/QWRO.jpg

Answer 1

这样的事情：

<div class="form-group">
    <label for="name">Name</label>
    <input id="name" type="text" />
</div>
<div class="form-group">
    <label for="family">Family</label>
    <input id="family" type="text" />
</div>
<div class="form-group" style="width:90%;">
    <label for="address">Address</label>
    <input type="text" id="address" />
</div>

<style>
.form-group {
float: left;
width: 40%;
height:50px;
margin: 0 5%;
}
.form-group label {
float:left;
width: 135px;
}
.form-group input {
float:left;
width: calc(100% - 135px);
}
</style>

Answer 2

删除您在地址input上应用的内嵌样式，并将css更改为以下内容 -

.form-group {
float: left;
width: 50%;
height:50px;
box-sizing: border-box;
padding-right: 20px;
}
.form-group label {
    float:left;
    width: 130px;
}
.form-group input {
    float:left;
    box-sizing: border-box;
    width: calc(100% - 130px); /* supported in latest browsers */
}

check out the compatible browsers for calc - http://caniuse.com/#feat=calc

这是working fiddle

另一种解决方案是使用4列中的tables，然后使用colspan最后一个地址input至3.我认为，这将是最佳解决方案，因为它将是兼容旧版浏览器。

在div中设置宽度元素

2 个答案: