CSS 布局有問題。 垂直 alignment 出現問題
[英]Having trouble with CSS layout. Problem with vertical alignment
問題描述
我正在寫一份調查表，但垂直 alignment 遇到問題。 如何將單選框和復選框輸入與它們上方的文本垂直對齊？
看看下面的兩張圖片，可以更好地理解我在問什么。
我的代碼呈現的表單截圖： img1
這是我想要實現的截圖： img2
這是我的代碼：
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 個解決方案
解決方案1
1 2021-05-11 20:14:26
從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>
解決方案2
0 2021-05-11 20:53:10
從 ul 刪除填充后它會起作用
解決方案3
0 2021-05-11 21:16:18
您將獲得 ul/ol 的默認值，例如
margin-block-start: 1em;
因此，對於這種情況，您必須將填充和邊距設置為“0px/0”。 喜歡：
ul {
padding: 0;
marging: 0;
}
css中多個元素的垂直對齊（如何實現這種布局）
[英]Vertical alignment in css of multiple elements (How to achieve this layout)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.