+ 4

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

11th May 2022, 5:20 AM
midnightcoder
midnightcoder - avatar
9 Respostas
+ 1
It is better post via a code link from code playground. Instead of all this text in the comment section. The code should work if you have the CSS in the CSS tab. https://code.sololearn.com/W4AVdFmi6Q4v/?ref=app
11th May 2022, 6:34 AM
Chris Coder
Chris Coder - avatar
+ 2
midnightcoder You're welcome i'm always happy to assist! You still have errors in your code. Keep in mind that the code playground is less strict since it is a practice environment (sandbox). You may validate your code to see what else is wrong with it. Copy and paste your HTML here. https://validator.w3.org/#validate_by_input - Happy Coding!
11th May 2022, 7:20 AM
Chris Coder
Chris Coder - avatar
+ 1
Oh ... wrap a div around the next label section and do the same to the button section.
11th May 2022, 6:08 AM
Chris Coder
Chris Coder - avatar
+ 1
<div class=""> <label> </label> <input></input> </div> <div class=""> <label> </label> <input></input> </div> <div class=""><input></input></div>
11th May 2022, 6:12 AM
Chris Coder
Chris Coder - avatar
11th May 2022, 6:38 AM
midnightcoder
midnightcoder - avatar
+ 1
There are many errors in that code. You should fix your page structure. Make sure every tag has a start and end. Example: <!DOCTYPE html> <html> <head> <title></title> </head> <body> <section> </section> </body> </html>
11th May 2022, 6:52 AM
Chris Coder
Chris Coder - avatar
+ 1
If its overwhelming. Just close your table tag. </tr> </table> Should do the trick.
11th May 2022, 7:00 AM
Chris Coder
Chris Coder - avatar
0
Do you have your CSS in the CSS tab?
11th May 2022, 6:30 AM
Chris Coder
Chris Coder - avatar
0
Thanks Chris, I got it now, you save my day=] it was the </table> that I missed...
11th May 2022, 7:08 AM
midnightcoder
midnightcoder - avatar