CSS Layout 24.2 code repo question
We need to change the layout of our form so that the fields are laid out horizontally. Here is what we want to achieve: content Image To achieve this layout, we need to do the following: 1. Modify the HTML of the form: remove the <br> elements that separate the form into lines. - Add <br> elements after the <label> tags, so that the number field appears after the label, on a new line. - Wrap each section element into <div> tags, and provide them a class="form-section". - Now we will have 3 "form-section" elements. Two of them will contain the labels and their corresponding fields, while the 2rd one will contain the button. 2. In CSS, set the display property of the form to flex. 3. Set the flex property to 1 for the form-section class. 4. For our button, add a height of 40px and set the width to 100%. I get stuck at this question and I don't know which part in my code causing different result. Please help~ Here is my code Html: <section id="buy"> <form> <div class="form-section"> <label for="Adult">Adults:</label><br> <input type="number" id="Adult"> <label for="Children">Children:</label><br> <input type="number" id="Children"> <input type="button" value="Buy"> </div> </form> </section> CSS: input[type="number"] {padding:2px; text-align: center; width:50px;} input[type="button"] {background-color: #2493df; font-weight: bold; font-size:16px; color: white; border: none; height: 40px; width: 100%; } form {display: flex;} .form-section { flex:1; }
Often have questions like this?
Learn more efficiently, for free:
