我在问题表单中的 css 遇到了一些问题答案

【问题标题】：I am having a bit of trouble with the css i the Question form我在问题表单中的 css 遇到了一些问题
【发布时间】：2020-09-02 06:19:33
【问题描述】：

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

目前是这样的

Current One

代码 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;
}

我希望问题表单看起来像这样

What i want it to look like

我不太了解 css 和 html，所以不要害怕告诉我一些批评，即使它很基础对于任何回答我问题的人，谢谢，我希望你有一个美好的一天。

【问题讨论】：

虽然有一些方法可以解决这个问题，但您的代码在语义上存在很多问题，这使得这很困难。我将专注于表格。答案不应单独包装在<form> 标签中。整个问卷是一个表格，因此您的整个表格应该包装在<form> 中，您可以将答案包装器更改为 div 并添加一个类.answers 以进行控制。你无缘无故地使用了 id，把它们改成可重用的类。

标签： javascript html css flexbox

【解决方案1】：

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

【讨论】：