如何在其他div中保留div?

时间:2015-06-23 14:50:17

标签: html css styling

html正文,包含表格的简单表格和两个div(登录和表格):

<body>
    <div id="container">
        <form>
            <div class="login">
                <div class="table">
                    <table class="userInput">
                        <tr>
                            <td><input type="text" placeholder="Username" id="username"
                                name="login"></td>
                        </tr>
                        <tr>
                            <td><input type="submit" value="submit"></td>
                        </tr>
                    </table>
                </div>
            </div>
        </form>
    </div>
</body>

我的css:

html,body {
    margin: 0;
    padding: 0;
    height: 100%;
}

table.userInput {
    margin-top: 15%;
    width: 100%;
    height: 100%;
}

div#container {
    background: pink;
    height: 100%;
}

div.login {
    background-color: black;
    margin-top: 15%;
    margin-left: auto;
    margin-right: auto;
    height: 10%;
    width: 10%;
    padding: 10px;
}

div.table {
    width: 100%;
    height: 100%;
    background-color: grey;
}

div class="table" margin-top:15% table class="userInput"之后需要我的div class="login"灰色背景,但在偏移后我可以看到登录if ($_SERVER["REQUEST_METHOD"] == "POST") { //$GLOBALS['_oneSigner'] = isset($_POST["autorefill"]); createAndSend(); if(!$GLOBALS['_oneSigner']){ $GLOBALS['_showTwoSignerMessage'] = true; } } else if ($_SERVER["REQUEST_METHOD"] == "GET") { if (isset($_GET["envelopeID"])) { // Display a message that we are moving on to Signer Number 2 // - unless the message is suppressed (by signing from the GetStatusAndDocs page) if(isset($_GET['from_gsad'])){ getToken(getStatus($_GET['envelopeID']),$_GET['clientID']); }else{ $GLOBALS['_showTransitionMessage'] = true; getToken(getStatus($_GET['envelopeID']),2); } } else { $_SESSION["embedToken"] = ""; } } 的黑色。如何使用margin-top将其设为灰色?enter image description here

2 个答案:

答案 0 :(得分:2)

如果我理解你的问题,我建议你改变

padding:10px;

padding-top:10px;

并增加<div class='login'>元素的宽度

编辑

你的形象几乎改变了一切,请检查这个小提琴: SOLUTION

只有我更改的内容是删除margin-top:15%;并将其替换为padding-top:15%;,以便我可以将background-color:grey;添加到table.userInput元素。

在你的图片中看起来像。让我知道它是否有帮助:)

答案 1 :(得分:0)

margin-top: 15%;更改为padding-top: 15%;

table.userInput {
    padding-top: 15%;
    width: 100%;
    height: 100%;
}

根据你的照片,我认为这就是你想要的。

top padding

http://jsfiddle.net/7j8z3v3w/