css绝对位置提交按钮右下角不起作用

Question

由于某种原因,它将按钮放在div的外面,就在右上角的上方.好像就在div的右上角上方就像右下角一样.

例如,如果我添加底部10px,它将从div开始并将其向上移动10px.同样的事情发生在右边

CSS:

        #newSignupContent {
            display: block;
            position: relative;

            width: 400px;
            height: 250px;
            margin: auto auto;
        }

        #newSignupContent label {
            display: inline-block;
            float: left;
            clear: left;
            width: 40%;
            padding-right: 10px;

            text-align: right;
            color: white;
            font-family:calibri, Times, serif;
            font-size: 22px;

        }

        #newSignupContent input {
            display: inline-block;
            width: 50%;
            float: left;
            padding: 5px 10px 5px 0px;
        }

        #newSignupContent #newSignupSubmit {
            position: absolute;
            bottom: 0;
            right: 0;

            width: 80px;
            height: 40px;

            padding: 5px 10px 5px 10px;
        }

形成:

 <div id="newSignupContent">
                    <form action="/webroot/NewUserSignUpProcess" method="post">

                        <label>Account Name:</label>
                        <input type="text" name="txtAccountName">

                        <label>Email Address:</label>
                        <input type="text" name="txtEmailAddress">

                        <label>Password:</label>
                        <input type="text" name="txtPassword">

                        <input id="newSignupSubmit" type="submit" value="Submit">

                    </form>
                </div>

Answer 1

由于* {position:relative;}您在那里，您的按钮相对于 ' ' 元素自行定位form。' form' 元素没有高度，因为它的所有后代都有 ' float:left;'，因此不会“拉伸”表单的高度。“ submit”按钮相对于表单位于“ bottom:0;right:0;”处，没有高度，结果看起来像是包含“ ”的右上角div。

在附件中Fiddle Demo，请注意，如果您position:relative;从“ ”form元素中删除“ ”，则一切都会设置正确。我还为包含的“ div”和“ form”添加了边框。