居中后如何為單選按鈕和復選框左對齊文本

Question

我真的有2個問題。 如何將我的單選按鈕和復選框對齊到 css 中已經居中的表單組的左側。它們目前都居中，但我希望復選框和單選按鈕對齊到左側，但仍居中。 另外，如何使我的表單使用滾動條占據整個頁面，就像我將提供的示例一樣。 當前的所有內容都位於頁面頂部。 請讓我知道任何問題，真的被困在這里，只需要一點點推動。 謝謝。 示例： https://survey-form.freecodecamp.rocks/

 .text-center { text-align: center; margin: auto; }.form-group { text-align: center; margin: auto; }.clue { text-align: center; }.input-checkboxes { text-align: center; } * { box-sizing: border-box; box-sizing: inherit; margin: 0; padding: 0; font-family: lato, arial; } body { background: url(images/tech2.webp); background-size: 100%; height: 100%; }.container { grid-column: 5 / 9; max-width: 600px; margin: 20px auto 20px; padding: 30px 30px 30px 30px; border: 1px solid black; border-radius: 8px; background-color: rgba(255, 255, 255, 0.763); } header { text-align: center; padding-top: 20px; padding-bottom: 20px; } h1 { margin-bottom: 5px; }.checkbox, .radio-button { display: block; }.form-grou>.inline { margin-right: 6px; text-align: left; } #submit { font-size: 16px; display: block; margin: 0 auto; background: #2f80ed; color: white; border: none; border-radius: 6px; padding: 10px 24px; } @media only screen and (max-width: 1000px) {.container { grid-column: 1 / 12; } }

 <header class="header"> <h1 id="title" class="text-center">Survey Form</h1> <p id="description" class="description text-center">Thank you for taking the time to help me improve my skills as a developer</p> </header> <div class="container"> <form id="survey-form"> <div class="form-group"> <label id="name-label" for="name">Name: <input required id="name" for="name" type="text" placeholder="Name"></label><br/> </div> <div class="form-group"> <label id="email-label" for="email">Email: <input required id="email" type="email" placeholder="E-mail"></label><br/> </div> <div class="form-group"> <label id="number-label" for="numebr">Age: <input required id="number" min="13" max="120" type="number" placeholder="Age"></label><br/> </div> <div class="form-group"> <p>Which option best describes your current role?</p> <select for="dropdown" id="dropdown" name="role" class="form-control" required> <option disabled selected>Seelct current role</option> <option value="student">Student</option> <option value="teacher">Teacher</option> <option value="job">Full time job coding</option> <option value="preferNo">Prefer not to say</option> <option value="other">Other</option> </select><br/> </div> <div class="form-group"> <label> Based on my portfolio/resume, would you say that I am job ready?<br/> <input type="radio" name="referal" class="inline" value="definitely" /> Definitely</label><br/> <label> <input type="radio" name="referal" class="inline" value="maybe" /> Maybe</label><br/> <label> <input type="radio" name="referal" class="inline" value="definitelyNot"/> Definitely not </label><br/> </div> <div class="form-group"> <label>In your opinion, what would you say is my strongest skill?<br/> <select id="improved" name="improved" class="form-control" required> <option disabled selected>Seelct an option</option> <option value="html/css">HTML/CSS</option> <option value="javascript">Javascript</option> <option value="ui/ux">UI/UX Design</option> <option value="response">Responsiveness/Functionability</option> <option>Project Ideas</option> </select><br/> </label> </div> <div class="form-group"> <p>What would you like to see improved? <span class="clue">(Check all that apply)</span></p> <label> <input type="checkbox" name="improved" class="input-checkbox" value="frontend"/> Front-End skills<br/> <input type="checkbox" name="improved" class="input-checkbox" value="backend" /> Back-End skills<br/> <input type="checkbox" name="improved" class="input-checkbox" value="ui/ux"/> UI/UX Design<br/> <input type="checkbox" name="improved" class="input-checkbox" value="response"/> Responsiveness/Functionality<br/> <input type="checkbox" name="improved" class="input-checkbox" value="response" /> Project Ideas<br/> <input type="checkbox" name="improved" class="input-checkbox" value="number"/> Number of Projects<br/> </label> </div> <div class="form-group"> <p>Any other comments or suggestions?</p> <textarea name="comments" id="comments" rows="3" cols="30" class="input-textarea" placeholder="Enter your comments here..."></textarea> </div> <div class="form-group"> <button type="submit" id="submit" class="submit-button">Submit </button> </div> </div> </form> </div>

Answer 1

您為帶有單選按鈕的 div 提供了 class .form-group. 這個 class 有一個屬性align-center如果你從 div 中刪除它，按鈕將向左對齊。

如果您將.text-center給<p> ，則 tekst 將對齊中心

 .text-center{ text-align: center; margin: auto; }.form-group{ text-align: center; margin: auto; }.clue{ text-align: center; }.input-checkboxes{ text-align: center; } * { box-sizing: border-box; box-sizing: inherit; margin: 0; padding: 0; font-family: lato, arial;} body{ background: url(images/tech2.webp); background-size: 100%; height: 100%; }.container{ grid-column: 5 / 9; max-width: 600px; margin: 20px auto 20px; padding: 30px 30px 30px 30px; border: 1px solid black; border-radius: 8px; background-color: rgba(255, 255, 255, 0.763); } header{ text-align: center; padding-top: 20px; padding-bottom: 20px; } h1{ margin-bottom: 5px; }.checkbox, .radio-button { display: block; }.form-grou >.inline { margin-right: 6px; text-align: left; } #submit { font-size: 16px; display: block; margin: 0 auto; background: #2f80ed; color: white; border: none; border-radius: 6px; padding: 10px 24px; } @media only screen and (max-width: 1000px) {.container { grid-column: 1 / 12; } }

 <.DOCTYPE html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="styles:css"> <title>Survey</title> </head> <header class="header"> <h1 id="title" class="text-center">Survey Form</h1> <p id="description" class="description text-center">Thank you for taking the time to help me improve my skills as a developer</p> </header> <div class="container"> <form id="survey-form"> <div class="form-group"> <label id="name-label" for="name">Name: <input required id="name" for="name" type="text" placeholder="Name"></label><br/> </div> <div class="form-group"> <label id="email-label" for="email">Email: <input required id="email" type="email" placeholder="E-mail"></label><br/> </div> <div class="form-group"> <label id="number-label" for="numebr">Age? <input required id="number" min="13" max="120" type="number" placeholder="Age"></label><br/> </div> <div class="form-group"> <p>Which option best describes your current role,</p> <select for="dropdown" id="dropdown" name="role" class="form-control" required> <option disabled selected>Seelct current role</option> <option value="student">Student</option> <option value="teacher">Teacher</option> <option value="job">Full time job coding</option> <option value="preferNo">Prefer not to say</option> <option value="other">Other</option> </select><br/> </div> <div> <label> <p class="text-center">Based on my portfolio/resume? would you say that I am job ready,<br/> </p> <input type="radio" name="referal" class="inline" value="definitely" /> Definitely</label><br/> <label> <input type="radio" name="referal" class="inline" value="maybe" /> Maybe</label><br/> <label> <input type="radio" name="referal" class="inline" value="definitelyNot"/> Definitely not </label><br/> </div> <div class="form-group"> <label>In your opinion? what would you say is my strongest skill?<br/> <select id="improved" name="improved" class="form-control" required> <option disabled selected>Seelct an option</option> <option value="html/css">HTML/CSS</option> <option value="javascript">Javascript</option> <option value="ui/ux">UI/UX Design</option> <option value="response">Responsiveness/Functionability</option> <option>Project Ideas</option> </select><br/> </label> </div> <div> <p class="text-center" >What would you like to see improved? <span class="clue">(Check all that apply)</span></p> <label> <input type="checkbox" name="improved" class="input-checkbox" value="frontend"/> Front-End skills<br/> <input type="checkbox" name="improved" class="input-checkbox" value="backend" /> Back-End skills<br/> <input type="checkbox" name="improved" class="input-checkbox" value="ui/ux"/> UI/UX Design<br/> <input type="checkbox" name="improved" class="input-checkbox" value="response"/> Responsiveness/Functionality<br/> <input type="checkbox" name="improved" class="input-checkbox" value="response" /> Project Ideas<br/> <input type="checkbox" name="improved" class="input-checkbox" value="number"/> Number of Projects<br/> </label> </div> <div class="form-group"> <p>Any other comments or suggestions.</p> <textarea name="comments" id="comments" rows="3" cols="30" class="input-textarea" placeholder="Enter your comments here..."></textarea> </div> <div class="form-group"> <button type="submit" id="submit" class="submit-button">Submit </button> </div> </div> </form> </div>

Answer 2

去掉.text-center和.form-group的css