stackoom
  简体   繁体   中英

Having trouble with CSS layout. Problem with vertical alignment

 原文  2021-05-11 20:08:20  3   3    html/ css

Question

I'm writing a survey form and I'm having trouble with vertical alignment. How can I vertically align the radio & checkbox inputs with the text above them?

Have a look at the two images below to have a better understanding of what I'm asking.
Screenshot of the form my code renders: img1
Here's a screenshot of what I'm trying to achieve: img2

Here's my code: 

 body { text-align: center; height: 100vh; width: 100vw; overflow: hidden; background: -webkit-linear-gradient( rgba(29, 38, 113, 0.8), rgba(195, 55, 100, 0.8) ), url("https://images.pexels.com/photos/3184359/pexels-photo-3184359.jpeg?cs=srgb&dl=pexels-fauxels-3184359.jpg&fm=jpg"); background: linear-gradient(rgba(29, 38, 113, 0.8), rgba(195, 55, 100, 0.8)), url("https://images.pexels.com/photos/3184359/pexels-photo-3184359.jpeg?cs=srgb&dl=pexels-fauxels-3184359.jpg&fm=jpg"); /* The least supported option. */ background-size: cover; } h1, h2 { color: white; font: "Roboto Condensed", sans-serif; margin: 1px auto; } h1 { margin-top: 20px; }.master-div { width: 45em; margin: auto; margin-top: 25px; background-color: rgba(0, 0, 0, 0.6); padding: 1em; border-radius: 0.5em; } #survey-form { padding: 3em; }.labels { font-size: 1.3em; color: white; text-align: left; }.fields { text-align: left; margin: 0.5em 0 1.5em 0; }.input-fields { font-size: 1em; height: 2.5em; width: 100%; border-radius: 0.4em; padding-left: 0.8em; } ul * { text-align: left; color: white; list-style-type: none; } #time-of-day { margin-left: 0; }
 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <link rel="stylesheet" href="app,css" /> <title>Document</title> </head> <body> <main> <h1>Weblytics Bootcamp Post-Completion Survey</h1> <h2>Thank you for trusting us</h2> <div class="master-div"> <form action="POST" id="survey-form"> <div class="form-rows"> <div class="labels"> <label for="name">Name</label> </div> <div class="fields"> <input type="text" name="name" id="name" class="input-fields" placeholder="Enter your name" required /> </div> </div> <div class="form-rows"> <div class="labels"> <label for="email">Email</label> </div> <div class="fields"> <input type="email" name="email" id="email" class="input-fields" placeholder="Enter your email" required /> </div> </div> <div class="form-rows"> <div class="labels"> <label for="number">On a scale of 1-10? how good was it?</label> </div> <div class="fields"> <input type="number" name="number" id="number" class="input-fields" placeholder="Enter a number" min="1" max="10" required /> </div> </div> <div class="form-rows"> <div class="labels"> <label for="dropdown">Some question?</label> </div> <div class="fields"> <select name="dropdown" id="dropdown"> <option value="home">Option 1</option> <option value="office">Option 2</option> </select> </div> </div> <div class="form-rows"> <div class="labels"> <label for="dropdown">Some question?</label> </div> <div class="fields"> <ul id="time-of-day"> <li class="radio"> <input type="radio" name="time" id="morn" value="morning" checked /> <label for="morn">Option 1</label> </li> <li class="radio"> <input type="radio" name="time" id="after" value="afternoon" /> <label for="after">Option 2</label> </li> <li class="radio"> <input type="radio" name="time" id="even" value="evening" /> <label for="even">Option 3</label> </li> </ul> </div> </div> <div class="form-rows"> <div class="labels"> <label for="emotions" >Some question.<br /> (Select all that apply)</label > </div> <div class="fields"> <ul> <li class="radio"> <input type="checkbox" name="emotion" id="exc" value="excited" checked /> <label for="exc">Option 1</label> </li> <li class="radio"> <input type="checkbox" name="emotion" id="hum" value="humbled" /> <label for="hum">Option 2</label> </li> </ul> </div> </div> <div class="form-rows"> <div class="labels"> <label for="text">Please describe your experience.</label> </div> <div class="fields"> <textarea name="text" id="text" cols="50" rows="5" placeholder="Enter your experience" required ></textarea> </div> </div> <button class="button" type="sumbit">Submit</button> </form> </div> </main> </body> </html>

3 answers

solution1
 1  2021-05-11 20:14:26

Remove the padding from the ul . 

 body { text-align: center; height: 100vh; width: 100vw; background: -webkit-linear-gradient( rgba(29, 38, 113, 0.8), rgba(195, 55, 100, 0.8)), url("https://images.pexels.com/photos/3184359/pexels-photo-3184359.jpeg?cs=srgb&dl=pexels-fauxels-3184359.jpg&fm=jpg"); background: linear-gradient(rgba(29, 38, 113, 0.8), rgba(195, 55, 100, 0.8)), url("https://images.pexels.com/photos/3184359/pexels-photo-3184359.jpeg?cs=srgb&dl=pexels-fauxels-3184359.jpg&fm=jpg"); /* The least supported option. */ background-size: cover; } h1, h2 { color: white; font: "Roboto Condensed", sans-serif; margin: 1px auto; } h1 { margin-top: 20px; }.master-div { width: 45em; margin: auto; margin-top: 25px; background-color: rgba(0, 0, 0, 0.6); padding: 1em; border-radius: 0.5em; } #survey-form { padding: 3em; }.labels { font-size: 1.3em; color: white; text-align: left; }.fields { text-align: left; margin: 0.5em 0 1.5em 0; }.input-fields { font-size: 1em; height: 2.5em; width: 100%; border-radius: 0.4em; padding-left: 0.8em; } ul { padding: 0; } ul * { text-align: left; color: white; list-style-type: none; } #time-of-day { margin-left: 0; }
 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <link rel="stylesheet" href="app,css" /> <title>Document</title> </head> <body> <main> <h1>Weblytics Bootcamp Post-Completion Survey</h1> <h2>Thank you for trusting us</h2> <div class="master-div"> <form action="POST" id="survey-form"> <div class="form-rows"> <div class="labels"> <label for="name">Name</label> </div> <div class="fields"> <input type="text" name="name" id="name" class="input-fields" placeholder="Enter your name" required /> </div> </div> <div class="form-rows"> <div class="labels"> <label for="email">Email</label> </div> <div class="fields"> <input type="email" name="email" id="email" class="input-fields" placeholder="Enter your email" required /> </div> </div> <div class="form-rows"> <div class="labels"> <label for="number">On a scale of 1-10? how good was it?</label> </div> <div class="fields"> <input type="number" name="number" id="number" class="input-fields" placeholder="Enter a number" min="1" max="10" required /> </div> </div> <div class="form-rows"> <div class="labels"> <label for="dropdown">Some question?</label> </div> <div class="fields"> <select name="dropdown" id="dropdown"> <option value="home">Option 1</option> <option value="office">Option 2</option> </select> </div> </div> <div class="form-rows"> <div class="labels"> <label for="dropdown">Some question?</label> </div> <div class="fields"> <ul id="time-of-day"> <li class="radio"> <input type="radio" name="time" id="morn" value="morning" checked /> <label for="morn">Option 1</label> </li> <li class="radio"> <input type="radio" name="time" id="after" value="afternoon" /> <label for="after">Option 2</label> </li> <li class="radio"> <input type="radio" name="time" id="even" value="evening" /> <label for="even">Option 3</label> </li> </ul> </div> </div> <div class="form-rows"> <div class="labels"> <label for="emotions">Some question.<br /> (Select all that apply)</label > </div> <div class="fields"> <ul> <li class="radio"> <input type="checkbox" name="emotion" id="exc" value="excited" checked /> <label for="exc">Option 1</label> </li> <li class="radio"> <input type="checkbox" name="emotion" id="hum" value="humbled" /> <label for="hum">Option 2</label> </li> </ul> </div> </div> <div class="form-rows"> <div class="labels"> <label for="text">Please describe your experience.</label> </div> <div class="fields"> <textarea name="text" id="text" cols="50" rows="5" placeholder="Enter your experience" required></textarea> </div> </div> <button class="button" type="sumbit">Submit</button> </form> </div> </main> </body> </html>

solution2
 0  2021-05-11 20:53:10

Its gonna work after removing the padding from ul

solution3
 0  2021-05-11 21:16:18

You will get a default value for ul/ol like

margin-block-start: 1em;

So, you have to set the padding and margin to "0px/0" for this case. Like:

ul {
  padding: 0;
  marging: 0;
}

暂无
暂无

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.

Related Question Having trouble with css and divs layout. Also what tools..? CSS: Having trouble with vertical alignment using flex CSS vertical alignment problem Having trouble with Vertical Alignment of Text and Rotated Text Having trouble getting vertical alignment to work in a DIV CSS -> Having trouble with a very basic CSS layout Vertical alignment in css of multiple elements (How to achieve this layout) separate vertical alignment in column layout with css table cells Having trouble achieving specific CSS Grid layout CSS Table layout. Good way to accomplish this
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM