Question

在下面的代码中，

<style type="text/css">
            #header{
                height: 20px;
                background-color: #2A646C;
                width: 50%;
                margin: auto;
            }
            #container{
                display:flex;
                flex-wrap: wrap;
                border: 2px solid red;
                width: 50%;
                margin: auto;
                padding: 10px;
                background-color: #C4D8E2;
            }
            #container1{
                border: 2px solid yellow;
                width: 100%;
                background-color: #C4D8E2;
            }
            #container1 p span{
                background-color: #C4D8E2;
                color: #5D8AA8;
                font-family: sans-serif;
                font-size: 12px;
            }
            #container1 h3{
                background-color: #C4D8E2;
            }
            #container2{
                border: 2px solid blue;
                width: 45%;
                background-color: #C4D8E2;
                margin-right: 8%;
                display:flex;
                flex-wrap: wrap;
            }
            #container2 form{
                width: 100%;
                height: 100%;
            }
            #container2 p{
                width:100%;
            }
            #container2 span{
                font-weight: bold;
                font-family: "Times New Roman";
                font-size: 16px;
            }
            #container2 #span1{
                color: #5D8AA8;
                margin-right: 5px;
            }
            #container2 #span2{
                color: #5072A7;
            }
            #container2 input[type=submit]{
                border: 1px solid black;
                width: 25%;
                height: 40%;
                margin-left: 68%;
                background-color: #C4D8E2;
            }
            #container3{
                border: 2px solid green;
                width: 45%;
                background-color: #5072A7;
                color: white;
            }
            #container3 form{
                width: 100%;
                height: 100%;
            }
            #container3 input[type=submit]{
                border: 2px solid orange;
                background-color: #5072A7;
                width: 25%;
                height: 10%;
                margin-left: 68%;
            }
            #container3:nth-child(10){
                font-size: 14px;

            }
            #container3:nth-child(16){
                display: inline-block;
                font-size: 10px;
                font-style: underline;
                margin-left: 68%;
            }
        </style>

<div id="header"></div><br><br>
        <div id="container">
            <div id="container1">
                <h3>Enter the system</h3>
                <p><span>It is necessary to login in Your account in order to sign up for a course.</span></p>
            </div>

            <div id="container2">
                <p><span id="span1">ARE YOU NEW?</span><span id="span2">REGISTER</span></p>
                <form method="POST" action="javascript:void(0)" enctype="multipart/form-data">
                    <input type="text" name="username" required placeholder="User name" autocomplete="off"
                                pattern="^[A-Za-z0-9._-]{6,10}$" size="40" maxlength="10">
                <br><br>
                <input type="email" name="emailid" required placeholder="Email" autocomplete="off"
                                    pattern="^[A-Za-z0-9 _.-]+@[A-Za-z.-]+\.[A-Za-z]{3,4}$" size="40" maxlength="30">
                <br><br>
                <input type="password" name="password" required placeholder="Password" autocomplete="off"
                                    pattern="^[A-Za-z0-9 _.-]{8,15}$" size="40" maxlength="15">
                <br><br>
                <input type="password" name="confirmpassword" required placeholder="Confirm Password" 
                                    pattern="^[A-Za-z0-9 _.-]{8,15}$" size="40" maxlength="15" autocomplete="off">
                <br><br>
                <input type="submit" name="register" value="Register">  
                </form>
            </div>

            <div id="container3">
                <form method="POST" action="javascript:void(0)" enctype="multipart/form-data">
                    <p><span class="span3">ALREADY A STUDENT?</span><span class="span4">LOGIN</span></p>
                    <br><br>
                    <input type="text" name="loginname" required placeholder="User name" autocompleter="off"
                                    pattern="^[A-Za-z0-9._-]{6,10}$" size="40" maxlength="10">
                    <br><br>
                    <input type="password" name="loginpassword" required placeholder="Password" autocompleter="off"
                                        pattern="^[A-Za-z0-9 _.-]{8,15}$" size="40" maxlength="15">
                    <br><br>
                    <input type="checkbox" name="remember" value="yes" id="remember"><label for="remember">Remember me?</label>
                    <br><br>
                    <input type="submit" name="login" value="Login" id="loginbutton">
                    <br>
                    <label>Forgotpassword?</label>

                </form> 
            </div>

        </div>

1）包括其他元素后，container2或container3大小的高度不会增加，为什么？

2）如何使用nth-child选择container3的最后两个标签？

Answer 1

1）container2或container3大小在包含其他元素后不会增加，为什么？

因为您将整个容器的宽度限制为width: 50%。

DEMO 1 （您的原始代码，未经更改）

尝试此调整：

#container{
    display:flex;
    flex-wrap: wrap;
    border: 2px solid red;
    min-width: 50%; /* adjusted */
    margin: auto;
    padding: 10px;
    background-color: #C4D8E2;
}

DEMO 2

2）如何使用nth-child选择container3的最后两个标签？

#container3 > form > label:nth-last-of-type(1) { font-weight: bold; color: red; }
#container3 > form > label:nth-last-of-type(2) { font-weight: bold; color: aqua; }

DEMO 3

参考：http://www.w3.org/TR/css3-selectors/#selectors

替代DEMO 2 ...

如果您不想改变整个Flex容器的宽度约束，可以使表单成为flex容器，这会将表单元素限制在容器边界。

所以不是这样（如上所述）：

#container{
    display:flex;
    flex-wrap: wrap;
    border: 2px solid red;
    min-width: 50%; /* adjusted */
    margin: auto;
    padding: 10px;
    background-color: #C4D8E2;
}

试试这个：

#container2 form{
     width: 100%;
     height: 100%;
     display: flex;            /* new */
     flex-direction: column;   /* new */
}

#container3 form{
     width: 100%;
     height: 100%;
     display: flex;            /* new */
     flex-direction: column;   /* new */
}

DEMO 4

更新（根据评论和修订后的问题）

使用DEMO 4，我们可以改进提交按钮的显示：

#container2 input[type=submit]{
        border: 1px solid black;
        /* width: 25%; */
        height: 40%;
        /* margin-left: 68%; */
        background-color: #C4D8E2;

        /* new */
        margin-left: auto;
        margin-right: 5%;
        width: 75px;
}

#container3 input[type=submit]{
        border: 2px solid orange;
        background-color: #5072A7;
        /* width: 25%; */
        height: 10%;
        /* margin-left: 68%; */

        /* new */
        margin-left: auto;
        margin-right: 5%;
        width: 75px;
}

DEMO 5

Answer 2

关于你的第二点...

总共有2个标签所以你可以使用“nth-of-type” 看到我给标签颜色的代码。

class

Answer 3

第一点...

将BTN高度放在PX中它将解决您的问题

->add('user', UserType::class)

看到这个小提琴 https://jsfiddle.net/b4mdz048/ 加上最佳做法是向按钮添加填充更好

我建议你使用bootstrap或其他CSS框架

弹性框尺寸不会增加

3 个答案: