Question

我有两个div，他们应该并排。但是，一旦我在左侧div中的输入框中添加了填充，右侧div就会移动。

知道为什么吗？

html和css如下所示

<div style="text-align:center">
    <div style="display:inline-block;width:350px;height:200px;background-color:rgba(43, 171, 145, 0.54);margin-right:30px">
        <div style="text-align:left;height:30px;font-size:21px;padding:5px 0px 0px 10px;letter-spacing:7px;font-weight:bold;color:white;background-color:#2bab91"><u>NEW USER</u></div>
        <div style="
            /* text-align: left; */
            padding-top: 20px;
            width: 100%;
            ">
            <input type="text" name="email" id="email" placeholder="(Email)" style="
                width: 90%;
                /* margin: 10px; */
                height: 30px;
                ">
        </div>
    </div>
    <div style="display:inline-block;width:350px;height:200px;background-color: rgba(193, 89, 97, 0.61);margin-left:30px">
        <div style="text-align:left;height:30px;font-size:21px;padding:5px 0px 0px 10px;letter-spacing:7px;font-weight:bold;color:white;background-color:#c15961;"><u>EXISTING USER</u></div>
        <div>
            <input type="text" name="email" id="email" placeholder="(Email)">
        </div>
    </div>
</div>

http://jsfiddle.net/cAJgq/

Answer 1

将vertical-align: top添加到div样式

Answer 2

您的代码不干净...将您的CSS放入css文件中，最好清楚地看到您的HTML代码

                        <div style="display:inline-block;width:350px;height:200px;background-color:rgba(43, 171, 145, 0.54);margin-right:30px">
                        <div style="text-align:left;height:30px;font-size:21px;padding:5px 0px 0px 10px;letter-spacing:7px;font-weight:bold;color:white;background-color:#2bab91"><u>EXISTING USER<</u></div>

                        <div style="padding-top: 20px;width: 100%;">
                            <input type="text" name="email" id="email" placeholder="(Email)" style="width: 90%;height: 30px;">
                        </div>
                    </div>
                            <div style="display:inline-block;width:350px;height:200px;background-color:red;margin-right:30px">

                                <div style="text-align:left;height:30px;font-size:21px;padding:5px 0px 0px 10px;letter-spacing:7px;font-weight:bold;color:white;background-color:#c15961"><u>NEW USER</u></div>

                            <input type="text" name="email" id="email" placeholder="(Email)" style="width: 90%;height: 30px;margin-top: 20px;">
                    </div>

http://jsfiddle.net/cAJgq/1/

Div不相互对齐

2 个答案: