Question

我有两个表格，它们都嵌套在一个包含div中。我试图通过使用浮动来并排放置两种形式（和它们包含的div）。

虽然我能够成功地做到这一点，但是在使用chrome的开发者工具仔细检查包含div之后，我注意到当我的表单彼此分开时，边缘指定了css正在应用于表单< strong> inside 包含div而不是 on 包含div，尽管它是在包含div的css中指定的。

HTML（提取物）

<div id='UserRegistrationContainer'>

        <div id='UserRegistrationCover' class='RegistrationFormCover'>
            <input type='button' id='UserSignUp' value='Sign up today!' />
        </div>

        <form id='UserRegistration' class='RegistrationForm' method='POST' action='#'>

            //Form inputs/details here

        </form>

    </div>

<div id='ShopRegistrationContainer'>
        <div id='ShopRegistrationCover' class='RegistrationFormCover'>
            <input type='button' id='ShopSignUp' value='Sign up today!' />
        </div>

        <form id='ShopRegistration' class='RegistrationForm' method='POST' action='#'>

            //Form inputs/details here

        </form>
    </div>

CSS

.RegistrationFormCover{
    position:absolute;
    width: 100%;
    height: 100%;
    background: #0000CC;
    z-index: 100; }

#UserRegistrationContainer{
    position: relative;
    float:left;
    width:40%; }

#UserRegistration{
    display:inline-block; }

#ShopRegistrationContainer{
     position: relative;
    float:left;
    width:40%;
    margin-left: 50px; }

#ShopRegistration{
    display:inline-block; }

视觉示例

为什么我会得到这个

<UserRegistrationContainer><------ShopRegistration Container-------------->
---------------------------------------------------------------------------
                          |                |                              |
                          |                |                              |
                          |                |                              |
                          |      50px      |                              |
   UserRegistration       |  <--margin --> |     ShopRegistration         |
                          |                |                              |
                          |                |                              |
                          |                |                              |
---------------------------------------------------------------------------

并没有得到这个？

<UserRegistrationContainer>                <--ShopRegistration Container-->
---------------------------------------------------------------------------
                          |                |                              |
                          |                |                              |
                          |                |                              |
                          |       50px     |                              |
   UserRegistration       |  <--margin --> |     ShopRegistration         |
                          |                |                              |
                          |                |                              |
                          |                |                              |
---------------------------------------------------------------------------

jsfiddle：http://jsfiddle.net/x6SfW/

Answer 1

我认为你的第一个问题是你的div有很多你的位置属性和浮动属性。所有这些css样式都有非常具体的用途，据我所知，它们对于你想要完成的事情并不是完全必要的，两个垂直对齐的div，每个div有两个部分占据页面的大约80％。

首先让我们看一下HTML。

<div id="userRegistration" class="registration">
    <div>
        <input type='button' value='Sign up today!' />
    </div>
    <form method='POST' action='#'>

        //Form inputs/details here

    </form>
</div>
<div id="shoppingRegistration"  class="registration">
    <div>
        <input type='button' value='Sign up today!' />
    </div>
    <form method='POST' action='#'>

        //Form inputs/details here

    </form>
</div>

删除了不必要的额外标签ID和类。接下来是CSS。

.registration div{ //replaces RegistrationFormCover

    width:      100%;
    height:     100%;
    background: #0000CC;
    z-index:    100;

}
.registration {

    width:    40%;
    float:    left;
    position: relative;

}
.registration form {

    display: inline-block;

}
#shoppingRegistration{

    margin-left: 50px;

}

至于你现在的实际问题我刚刚意识到你可能只是错过了阅读Chrome开发者工具。橙色表示边缘区域而不是div的实际部分。无论哪种方式，这里的代码运行得如此好运，我希望它可以帮助你。

为什么我的边距应用于我的包含div而不是应用于它？

1 个答案: