我在问题表单中的 css 遇到了一些麻烦

Question

我在设计问题表单时遇到问题，特别是边距和填充。 我希望问题表格在问题之间没有间距，在答案之间有一点间距

目前看起来像这样

代码 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> &copy; 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 了解不多所以不要害怕告诉我一些批评，即使它很基本对于任何回答我问题的人谢谢，我希望你有一个愉快的一天。

Answer 1

有几种方法可以做到这一点。 您希望它在检查答案之间有空间，因此对每个 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>

我在问题表单中的 css 遇到了一些麻烦

问题描述

1 个解决方案

解决方案1
0 2020-09-01 22:19:33

我在问题表单中的 css 遇到了一些麻烦

问题描述

1 个解决方案

解决方案1 0 2020-09-01 22:19:33

解决方案1
0 2020-09-01 22:19:33