I am having a bit of trouble with the css i the Question form
Question
I am having trouble with the design of the question form, specifically the margin and and padding. I want the question form to have no spacing in between the the questions and a bit of spacing between the answers
Currently it looks like this
The Code Html
<.DOCTYPE html> <html> <head> <title>Website July 28 2020</title> </head> <link rel="stylesheet" type="text/css" href="Website,css"> <body> <section id="Heading"> <header> <h1>JAVASCRIPT/CSS/HTML PRACTICE</h1> </header> </section> <section class="Below-Heading"> <article> <div class="Middle"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam,Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam? </p> </div> <div class=" Second-Mid"> <h2> Questions </h1> <h3> How are you doing? </h3> <form id="Feeling"> <div class="Feel"> <input type="radio" id="Great" name ="gender" value="Great"> <label for="male">Great</label> <input type="radio" id="Ok" name="gender" value="Ok"> <label for="Ok">Ok</label> <input type="radio" id="Terrible" name="gender" value="Terrible"> <label for="Terrible">Terrible</label> </div> </form> <h3> Want to know the time; </h3> <form id="Time"> <input type="button" id="Yes" value="YES"> <input type="button" id="Yes" value="NO"> </form> </article> </div> </section> <footer> © CopyRight 2020 Website July 28 2020 </footer> </body> </html>
Current Css
#Feeling{ padding: 1em; } #Feel{ display: flex; } h2{ margin: 5px; font-size: 25px; color: rgb(53, 47, 40); background-color: grey; text-align: center; padding: 3px; padding-left: 2em; } h4{ margin: 5px; font-size: 25px; color: rgb(53, 47, 40); background-color: grey; text-align: left; padding: 3px; padding-left: 2em; }.Middle{ margin-top: 3em; width: 40%; }.Second-Mid{ width: 50%; } article{ display: flex; } header{ text-align: left; font-size: 18px; background-color: darkslategray; padding: 10px; padding-left: 2em; margin: 5px; color: bisque; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; } p{ text-align: left; font-size: 18px; background-color: darkslategray; padding: 10px; padding-left: 2em; margin: 10px; margin-left: 40px; margin-right: 60px; color: bisque; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; } h3{ margin: 1px; font-size: 30px; text-align: center; color: rgb(53, 47, 40); background-color: grey; text-align: center; padding: 3px; } form{ margin: 3px; padding: 3px; padding-bottom: 6px; text-align: center; font-size: 18px; background-color:#223939 } #Yes{ margin-left: 10px; }
I want the questions form to look like this
I don't know alot about css and html so don't be afraid to tell me some criticism even if it pretty basic For anyone who does answer my question thanks and I hope you have a good day.
1 answers
solution1
0 2020-09-01 22:19:33
There are a few ways to do this. You want it to have space between the check answers, so it would make sense to use flex for each div(questions) and use a div for each answer so that the radio wont get far from the text.
body{ width: 100vw; height: 100vh; background-color: purple; } form{ width: 50vw; height: 70vh; background-color:blue; text-align: center; margin: 0 auto; }.questions{ display:flex; flex-flow: row wrap; justify-content: space-around; }
<form> <h3> Are you cool?</h3> <div class="questions"> <div> <input type="radio"> <label>Cool</label> </div> <div> <input type="radio"> <label>Awesome</label> </div> <div> <input type="radio"> <label>Great</label> </div> </div> <h3>U sure?</h3> <div class="questions"> <div> <input type="radio"> <label>Yep</label> </div> <div> <input type="radio"> <label>Nope</label> <div> </div> </form>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.