如何將我的單選按鈕和復選框左對齊，就像我可以輕松地用段落對齊一樣？
[英]How to align left my radio buttons and checkboxes like I can do it easily with paragraphs?
問題描述
我使用了 margin-right:-9rem; 在輸入元素中。 但這對我來說聽起來不是什么好方法，我知道為什么。 但是有更好的選擇嗎？ 我只是在嘗試我的單選按鈕和復選框附近的復選框。 我一直在嘗試做調查表來練習我的 html 和 css 知識。 請幫我。
body { background-color: rgb(25, 230, 161); font-family: Arial, Helvetica, sans-serif; text-align: center; } h1 { font-weight: bold; color: white; margin-top: 2rem; } #description, #welcome { font-style: italic; font-size: 1.1rem; } main { width: 60%; border: 2px solid red; margin: 0 auto; text-align: left; padding: 1rem 2rem; /*margin moves the border, padding changes the inside elements, not position of border.*/ } label { display: block; /*make labels one under the other */ padding-bottom: .3rem; padding-top: 1rem; } input { width:20rem; margin-right: -9rem; } [for="dropdown"] { margin-top: 1rem; } p { margin-bottom: 0; }
<body> <h1 id="title">LearningHtmlCss Course Survey Form</h1> <p id="description">This survey page is built for gathering information about people taking this course. So that we can improve our site.</p> <p id="welcome">Thank you for taking time to help us improve the platform</p> <main> <form id="survey-form"> <label for="name" id="name-label">Name</label> <input type="text" id="name" name="name" placeholder="Enter your name" required> <label for="email" id="email-label">Email</label> <input type="email" id="email" name="email" placeholder="username@gmail.com" pattern=".+@gmail.com" title="Please provide only gmail address" placeholder="Enter your email" required> <,--email validation--> <label for="age" id="number-label">Age</label> <input type="number" id="age" min="7" max="99" placeholder="between 7? and 99" required> <label for="dropdown">Which option best describes your current role?</label> <select name="current role" id="dropdown"> <option>Select current role</option> <option value="student">Student</option> <option value="job">Full time job</option> <option value="learner">Full time learner</option> <option value="not to say">Prefer not to say</option> <option value="other">Other</option> </select> <p>Would you recommend LearningHtmlCss course to a friend?</p> <label> <input type="radio" name="option" value="Definitely" checked>Definitely </label> <label> <input type="radio" name="option" value="Maybe">Maybe </label> <label> <input type="radio" name="option" value="Not sure">Not sure </label> <p>What would you like to see improved?</p> <label> <input type="checkbox" name="front-end" value="front-end">Front-end projects </label> <label> <input type="checkbox" name="back-end" value="back-end">Back-end projects </label> <label> <input type="checkbox" name="forum" value="forum">Forum </label> <label> <input type="checkbox" name="videos" value="videos">Videos </label> <label> <input type="checkbox" name="city-meetups" value="city-meetups">City Meetups </label> <label> <input type="checkbox" name="additional" value="additional">Additional courses </label> <label for="comments">Any comments or suggestions.</label> <input type="textarea" name="comment" id="comments" placeholder="Enter your comment here..."> <button type="submit">Submit</button> </form> </main> </body>
1 個解決方案
解決方案1
0 已采納 2020-12-22 18:08:01
為了更正收音機的 position 和按鈕的復選框，您需要替換此input的 css 規則：
input {
width: 20rem;
margin-right: -9rem;
}
替換為這個：
input {
width: auto;
margin: 0 5px 0 0;
}
如何對齊單選框，使其位於左側，並使列表與FCC調查表中的其他元素對齊？
[英]How can I align my radio checkboxes so that they are on the left and align the list with other elements on my FCC Survey form?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.