彈性盒尺寸不增加

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其他元素后， container2或container3大小未增加高度，為什么？

2）如何使用nth-child來選擇container3最后兩個標簽？

Answer 1

1） container2其他元素后， container2或container3大小沒有增加，為什么？

因為您將整個容器的寬度限制為width: 50% 。

演示1 （您的原始代碼，未更改）

嘗試此調整：

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

演示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; }

演示3

有關參考，請參見： http : //www.w3.org/TR/css3-selectors/#selectors

---

替代DEMO 2 ...

如果您不想改變整個flex容器的寬度約束，則可以制作form彈性容器，這會將form元素限制在容器的邊界內。

因此，代替此（如上所述）：

#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 */
}

演示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;
}

演示5

Answer 2

關於你的第二點...

總共有2個標簽，因此您可以使用“ nth-of-type”，請參見我為標簽指定顏色的代碼。

#container3 label {
    background: #f0f none repeat scroll 0 0;
}
#container3 label:nth-of-type(1) {
    background: #ff0 none repeat scroll 0 0;
}
#container3 label:nth-of-type(2) {
    background: #f00 none repeat scroll 0 0;
}

Answer 3

對於您的第一點...

將BTN高度放在PX中可以解決您的問題

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

看到這個小提琴https://jsfiddle.net/b4mdz048/加上最佳實踐是在按鈕上添加填充效果更好

我建議您使用引導程序或其他CSS框架