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＆＃39;元件。＆＃39; form＆＃39;元素，没有高度，因为它的所有后代都有＆＃39; float:left;＆＃39;因此没有＆＃34;伸展＆＃34;形式的高度。＆＃39; submit＆＃39;按钮，位于＆＃39; bottom:0;right:0;＆＃39;相对于没有高度的表单，导致看起来像是包含＆＃39; div＆＃39;的右上角。

在随附的 Fiddle Demo 中，请注意，如果您删除了＆＃39; position:relative;＆＃39;形成＆＃39; form＆＃39;元素，一切都正确。我还为包含＆＃39; div＆＃39;添加了边框。以及form＆＃39;。

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

1 个答案: