更改表單上的柔性方向屬性？

好吧，我試圖使用flexbox創建一個如下圖所示的列堆疊佈局。我得到那個工作：http://imgur.com/a/N9NHD 更改表單上的柔性方向屬性？

問題1：有一個左右邊距我不明白爲什麼？

/* CONTACT US SCREEN WIDTH 320PX */ 

.contact-us-section { 
    background-color:#f8f8f8; 
    padding: 1rem; 

} 
.contact-us-section h3 { 
    font-size: 1.4rem; 
    margin-bottom: 1.5rem; 
} 
.contact-us-section form { 
    display: flex; 
    flex-direction: column; 
} 
.contact-us-section fieldset { 
    display: flex; 
    flex-direction: column; 
} 
.contact-us-section label { 
    font-size: 1.2rem; 

} 
.contact-us-section input { 
    width: 100%; 
    margin: 1rem auto; 
    padding: 2rem; 
} 
.messagebox { 
    display: flex; 
    flex-direction: column; 
} 

#submit-btn { 
    background-color: black; 
    color: white; 
    padding: 1rem; 
    width: 80%; 
    font-size: 1.4rem; 
}

問題2：在大屏幕上我想要的輸入和標籤並排，所以我用柔性：在.form-row行應使標籤與在同一輸入排隊線。不工作任何想法？

  /* CONTACT SCREEN WIDTH 768 px */ 
     .form-row { 
      display: flex; 
      flex-direction: row; 
     } 


     .contact-us-section input { 
      width: 60%; 
     } 
     #submit-btn { 
      width: 10%; 
      font-size: 1.1rem; 
     } 

     .messagebox { 
      width: 50%; 
     }

HTML

 <div id="contact-View" class="contact-us-section"> 
      <div class="contact-form-wrap"> 
       <h3> CONTACT US</h3> 

       <form action="#"> 
        <fieldset class="form-row"> 
         <label>Name:</label> 
         <input class="name-email" type="text" value="name"><br>  
        </fieldset> 
        <fieldset class="form-row"> 
         <label>Email:</label> 
         <input class="name-email" type="text" value="email"><br>      
        </fieldset> 
        <div class="messagebox"> 
         <label id="message-label">Message:</label> 
         <textarea rows="10" cols="39" maxlength="200"></textarea></br> 
        </div> 
         <input id="submit-btn" type="submit" value="Submit">      
       </form> 
      </div> 

     </div> 

    </div>

來源

2017-07-26 Shaz

對於第一個問題：請刪除「填充：1rem;」從「聯繫我們部分」類，並嘗試.. – mithu

請檢查和評論我的答案，並讓我知道如果有什麼不明或缺失。如果不是，那麼如果你能接受最能幫助你的答案，那將是非常好的。 – LGSon

問題1：有一個保證金左右我不明白爲什麼？

在您的發佈代碼中沒有這樣的保證金。

問題2：在大屏幕我想輸入和標籤並排，所以我用柔性：排在.FORM行應使標籤和輸入排隊上同一條線。不工作任何想法？

即由2個以下問題引起的：

甲fieldset元素不能是柔性容器，所以無論是添加一個額外的包裝（我做在下面的示例）或改變元件類型。
爲form-row/fieldset規則時屏幕寬度768像素需要比最初的一組相同（或更高）的特異性，否則將不適用。

注意，表單元素顯得有些不是當屏幕更寬對齊，我沒有任何改變的，由於我不知道你是怎麼想它奠定了

堆棧段

/* CONTACT US SCREEN WIDTH 320PX */ 
 

 
.contact-us-section { 
 
    background-color: #f8f8f8; 
 
    padding: 1rem; 
 
} 
 

 
.contact-us-section h3 { 
 
    font-size: 1.4rem; 
 
    margin-bottom: 1.5rem; 
 
} 
 

 
.contact-us-section form { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.contact-us-section fieldset > div {  /* change to target added wrapper */ 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.contact-us-section label { 
 
    font-size: 1.2rem; 
 
} 
 

 
.contact-us-section input { 
 
    width: 100%; 
 
    margin: 1rem auto; 
 
    padding: 2rem; 
 
} 
 

 
.messagebox { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
#submit-btn { 
 
    background-color: black; 
 
    color: white; 
 
    padding: 1rem; 
 
    width: 80%; 
 
    font-size: 1.4rem; 
 
} 
 

 
@media (min-width: 768px) { 
 

 
    /* CONTACT SCREEN WIDTH 768 px */ 
 
    
 
    .contact-us-section .form-row > div { /* increased specificity */ 
 
    flex-direction: row; 
 
    } 
 
    .contact-us-section input { 
 
    width: 60%; 
 
    } 
 
    #submit-btn { 
 
    width: 10%; 
 
    font-size: 1.1rem; 
 
    } 
 
    .messagebox { 
 
    width: 50%; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div id="contact-View" class="contact-us-section"> 
 
    <div class="contact-form-wrap"> 
 
    <h3> CONTACT US</h3> 
 

 
    <form action="#"> 
 
     <fieldset class="form-row"> 
 
     <div> 
 
      <label>Name:</label> 
 
      <input class="name-email" type="text" value="name"> 
 
     </div> 
 
     </fieldset> 
 
     <fieldset class="form-row"> 
 
     <div> 
 
      <label>Email:</label> 
 
      <input class="name-email" type="text" value="email"> 
 
     </div> 
 
     </fieldset> 
 
     <div class="messagebox"> 
 
     <label id="message-label">Message:</label> 
 
     <textarea rows="10" cols="39" maxlength="200"></textarea> 
 
     </div> 
 
     <input id="submit-btn" type="submit" value="Submit"> 
 
    </form> 
 
    </div> 
 

 
</div>

來源

2017-07-26 08:40:30 LGSon

本守則將滿足您的要求，您在連接https://imgur.com/a/N9NHD畫面顯示。您可以根據您的要求爲768像素的屏幕自定義和添加CSS。看一看：

添加的外部庫：https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

.contact-us-section { 
 
    background-color:#f8f8f8; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.contact-us-section h3 { 
 
    font-size: 1.6rem; 
 
    margin-bottom: 1.5rem; 
 
    font-weight: bold; 
 
} 
 

 
.contact-form-wrap{ 
 
\t width: 50%; 
 
} 
 

 
.contact-us-section fieldset { 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 
.contact-us-section label { 
 
\t text-align: center; 
 
    font-size: 1.2rem; 
 
    font-weight: bold; 
 
    font-size: 1.3rem; 
 
} 
 
.contact-us-section input { 
 
    width: 100%; 
 
    margin: 1rem auto; 
 
    padding: 2rem; 
 
} 
 
.messagebox { 
 
\t text-align: center; 
 
} 
 
.messagebox textarea{ 
 
    width: 100%; 
 
} 
 

 
#submit-btn { 
 
    text-align: center; 
 
} 
 

 
#submit-btn input{ 
 
\t background-color: black; 
 
    color: white; 
 
    padding: 1rem; 
 
    width: 45%; 
 
    font-size: 1.4rem; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <div id="contact-View" class="contact-us-section"> 
 
      <div class="contact-form-wrap"> 
 
       <h3> CONTACT US</h3> 
 

 
       <form action="#"> 
 
        <fieldset class="form-row"> 
 
         <label>Name:</label><br> 
 
         <input class="" type="text" value="name"><br>  
 
        </fieldset> 
 
        <fieldset class="form-row"> 
 
         <label>Email:</label> 
 
         <input class="name-email" type="text" value="email"><br>      
 
        </fieldset> 
 
        <div class="messagebox"> 
 
         <label id="message-label">Message:</label><br> 
 
         <textarea rows="10" cols="39" maxlength="200"></textarea><br> 
 
        </div> 
 
        
 
        <div id="submit-btn"> 
 
         <input type="submit" value="Submit"> 
 
        </div>     
 
       </form> 
 
      </div> 
 

 
     </div>

希望它能幫助:)

來源

2017-07-26 06:31:39

更改表單上的柔性方向屬性？

回答

相關問題