我在問題表單中的 css 遇到了一些麻煩
[英]I am having a bit of trouble with the css i the Question form
問題描述
我在設計問題表單時遇到問題，特別是邊距和填充。 我希望問題表格在問題之間沒有間距，在答案之間有一點間距
目前看起來像這樣
代碼 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>
當前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; }
我希望問題表格看起來像這樣
我對 css 和 html 了解不多所以不要害怕告訴我一些批評，即使它很基本對於任何回答我問題的人謝謝，我希望你有一個愉快的一天。
1 個解決方案
解決方案1
0 2020-09-01 22:19:33
有幾種方法可以做到這一點。 您希望它在檢查答案之間有空間，因此對每個 div（問題）使用 flex 並為每個答案使用 div 是有意義的，這樣收音機就不會遠離文本。
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>
我的表單根據用戶輸入重定向到特定 URL 時遇到問題
[英]I am having trouble with my form redirecting to a specific URL based on user input
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.