Question

我有两个div，彼此相邻，如下所示：

#container{
    text-align: center;
}
#div1, #div2{
    display: inline-block;
    width: 40%;
}

div1有一个表单，问题是在我为#container应用样式后，表单中的元素被扭曲了。这些元素之前在this fiddle中对齐。但现在他们是like this。

如何使元素按原样对齐？

Answer 1

您还需要将输入元素限制为50％，而不是display: inline-block（在元素之间产生空格），使用float: left。

label{
    width: 50%;
    text-align: right;
    float: left;
    clear: both;
}
p input {
    width: 50%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}

JSFIddle

Answer 2

将所有内容包裹在alabel中，然后 see if this suits your purpose

form, #movies_booked {
    width: 45%; /* ammended*/
    display: inline-block;
    vertical-align: text-top;
}
label {
    width: 100%;
    text-align: left;/* ammended*/
    float:left;/* added */
    word-break:break-all;
}
label > input, label > select, label > span {
    float:right; /* added */
}

Answer 3

正文中的text-align：center正在影响所有元素，只需使用：

form p {
    text-align: left;
}

要在表单中重新排列文字。

在fiddle

中

让2个div彼此相邻并居中

3 个答案: