带有单选按钮和复选框的页面样式有问题

时间：2019-03-26 11:24:17

标签： html css

我试图弄清楚如何垂直排列3个或更多复选框或单选按钮。我可以让两个人上班，但其中一个人都会破坏设计。我有代码，因此任何人都可以看到我在说什么

https://codepen.io/adgoetz89/pen/jJROOm 

@import url('https://fonts.googleapis.com/css?family=Margarine');
body {
  background: linear-gradient(195deg, #4e9131, #527842, #46941c, #41633c);
}

.content {
  max-width: 500px;
  margin: auto;
  background: linear-gradient(95deg, #a8ff79, #7cc75a);
  padding-left: 20px;
}

#title {
  font-family: Margarine;
  font-size: 42px;
}

p {
  font-family: Margarine;
}

label {
  float: left;
  padding-right: 10px;
  width: 100px;
  text-align: right;
  margin-top: 10px;
  clear: left;
}

input,
textarea,
select {
  margin-top: 10px;
}

#interest-label {
  ;
}

#submit-form {
  margin-left: 100px;
  padding: 15px;
}
<html>

<body>
  <main>
    <div class="content">
      <h1 id="title">Take our survey!</h1>
      <article>
        <p id="description">We appreaciate your service! If you would like, please let us know how we are doing by filling out our survey.</p>
      </article>

      <form action="index.html" method="post" id="survey-form">

        <Section id="contactinfo">
          <div>
            <label id="name-label" for="name">Name:</label>
            <input type="text" name="name" placeholder="Enter your name" id="name" required>
          </div>
          <div>
            <label id="email-label" for="email">E-Mail:</label>
            <input type="email" name="email" placeholder="Enter your e-mail" id="email" required>
          </div>
          <div>
            <label id="number-label" for="phone">Phone:</label>
            <input type="number" name="phone" placeholder="Enter your phone number">
          </div>
          <div>
            <label id="age-label" for="phone">Age:</label>
            <input type="number" name="age" placeholder="Age" min="18" max="100" id="number">
          </div>
          <div>
            <label id="interest-label" for="interest">Interest:</label>
            <input type="checkbox" name="stock1" value="old">Old stock<br>
            <input type="checkbox" name="stock2" value="new">New stock<br>
          </div>
          <div>
            <label id="gender-label" for="gender">Gender:</label>
            <input type="radio" name="gender" value="male"> Male<br>
            <input type="radio" name="gender" value="female"> Female
          </div>
        </section>

        <section id="approval">
          <div>
            <label id="ratinglabel" for="rating">Order quality:</label>
            <select name="rating" id="dropdown">
              <option value="excellent">Excellent</option>
              <option value="good">Good</option>
              <option value="fair">Fair</option>
              <option value="poor">Poor</option>
            </select>
          </div>
        </section>

        <section id="comments">
          <div>
            <label id="messagelabel" for="message">Comments:</label>
            <textarea name="message" rows=4 cols=3 0 id="textinput">
            </textarea>
          </div>
        </section>

        <section id="submission">
          <div id="submit-form">
            <input type="submit" name="submit" id="submit">
          </div>
        </section>

      </form>
    </div>
  </main>
</body>

</html>

#main {
font-size: 14px;
font-family: Montserrat, Helvetica;
background: linear-gradient(180deg, #f5c5ba,
#f5d4ba, #f5e2ba);
border: 2px solid;
border-radius: 5px;
text-align: center; }

一旦我添加第三个复选框或单选按钮，代码就会混乱

3 个答案:

答案 0 :(得分：0)

您可以尝试使用display：inline-flex。但是，旧版本的IE或Opera不支持此功能

@import url('https://fonts.googleapis.com/css?family=Margarine');

body {
  background: linear-gradient(195deg, #4e9131, #527842, #46941c, #41633c);
}

.content {
  max-width: 500px;
  margin: auto;
  background: linear-gradient(95deg, #a8ff79, #7cc75a);
  padding-left: 20px;
}

#title {
  font-family: Margarine;
  font-size: 42px;
}

p {
  font-family: Margarine;
}

label {
  float: left;
  padding-right: 10px;
  width: 100px;
  text-align: right;
  margin-top: 10px;
  clear: left;
}

input, textarea, select {
  margin-top: 10px;
}

#submit-form {
  margin-left: 100px;
  padding: 15px;
}

.radio-group {
  display: inline-flex;
}

.checkbox-group{
  display: inline-flex;
}
<html>

  <body>
    <main>
    <div class="content">
      <h1 id="title">Take our survey!</h1>
      <article>
        <p id="description">We appreaciate your service! If you would like, please let us know
        how we are doing by filling out our survey.</p>
      </article>

      <form action="index.html" method="post" id="survey-form">

        <Section id="contactinfo">
          <div>
            <label id="name-label" for="name">Name:</label>
            <input type="text" name="name" placeholder="Enter your name" id="name" required>
          </div>
          <div>
            <label id="email-label" for="email">E-Mail:</label>
            <input type="email" name="email" placeholder="Enter your e-mail" id="email" required>
          </div>
          <div>
            <label id="number-label" for="phone">Phone:</label>
            <input type="number" name="phone" placeholder="Enter your phone number">
          </div>
          <div>
            <label id="age-label" for="phone">Age:</label>
            <input type="number" name="age" placeholder="Age"
            min="18" max="100" id="number">
          </div>
          <div class="checkbox-group">
            <label id="interest-label" for="interest">Interest:</label>
            <input type="checkbox" name="stock1" value="old">Old stock<br>
            <input type="checkbox" name="stock2" value="new">New stock<br>
            <input type="checkbox" name="stock3" value="foo">Foo stock<br>

          </div>
          <div class="radio-group">
            <label id="gender-label" for="gender">Gender:</label>
            <input type="radio" name="gender" value="male"> Male<br>
            <input type="radio" name="gender" value="female"> Female
            <input type="radio" name="gender" value="other"> Other

          </div>
        </section>

        <section id="approval">
          <div>
            <label id="ratinglabel" for="rating">Order quality:</label>
            <select name="rating" id="dropdown">
              <option value="excellent">Excellent</option>
              <option value="good">Good</option>
              <option value="fair">Fair</option>
              <option value="poor">Poor</option>
            </select>
          </div>
        </section>

        <section id="comments">
          <div>
          <label id="messagelabel" for="message">Comments:</label>
            <textarea name="message"
            rows = 4 cols = 30 id="textinput">
            </textarea>
          </div>
        </section>

      <section id="submission">
        <div id="submit-form">
          <input type="submit" name="submit" id="submit">
        </div>
      </section>

      </form>
    </div>
    </main>
  </body>

</html>

答案 1 :(得分：0)

04FS是正确的，我需要将标签放在div中，并使用display：inline-flex设置样式。很好的解释，谢谢大家的帮助。

答案 2 :(得分：0)

如前所述，用跨度将您的字段包裹起来。我通常喜欢将标签叠放在顶部，这样响应起来就没那么麻烦了，但这应该可以帮助您入门。

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
</head>

<body>
  <style>
    @import url('https://fonts.googleapis.com/css?family=Margarine');
    body {
      background: linear-gradient(195deg, #4e9131, #527842, #46941c, #41633c);
    }
    
    .content {
      max-width: 500px;
      margin: auto;
      background: linear-gradient(95deg, #a8ff79, #7cc75a);
      padding-left: 20px;
    }
    
    #title {
      font-family: Margarine;
      font-size: 42px;
    }
    
    p {
      font-family: Margarine;
    }
    
    label {
      float: left;
      padding-right: 10px;
      width: 100px;
      text-align: right;
      clear: left;
    }
    
    #submit-form {
      margin-left: 100px;
      padding: 15px;
    }
    
    span.value {
      display: block;
      padding-left: 110px;
    }
    
    label.inline {
      display: inline;
      float: none;
    }
    
    input[type=checkbox],
    input[type=radio] {
      display: inline;
    }
    
    input[type="checkbox"],
    input[type="radio"] {
      margin: 0px 3px 3px 0px;
    }
    
    form div {
      padding-bottom: 10px;
    }
  </style>
  <html>

  <body>
    <main>
      <div class="content">
        <h1 id="title">Take our survey!</h1>
        <article>
          <p id="description">We appreaciate your service! If you would like, please let us know how we are doing by filling out our survey.</p>
        </article>
        <form action="index.html" method="post" id="survey-form">
          <section id="contactinfo">
            <div>
              <label id="name-label" for="name">Name:</label>
              <input type="text" name="name" placeholder="Enter your name" id="name" required>
            </div>
            <div>
              <label id="email-label" for="email">E-Mail:</label>
              <input type="email" name="email" placeholder="Enter your e-mail" id="email" required>
            </div>
            <div>
              <label id="number-label" for="phone">Phone:</label>
              <input type="number" name="phone" placeholder="Enter your phone number">
            </div>
            <div>
              <label id="age-label" for="phone">Age:</label>
              <input type="number" name="age" placeholder="Age" min="18" max="100" id="number">
            </div>
            <div>
              <label id="interest-label" for="interest">Interest:</label>
              <span class="value">
     <input type="checkbox" name="stock1" value="old">
     <label class="inline">Old stock</label>
     </span>
              <span class="value">
     <input type="checkbox" name="stock2" value="new">
     <label class="inline">New stock</label>
     </span>
              <span class="value">
     <input type="checkbox" name="stock3" value="both">
     <label class="inline">Old and New stock</label>
     </span>
            </div>
            <div>
              <label id="gender-label" for="gender">Gender:</label>
              <span class="value">
     <input type="radio" name="gender" value="male">
     <label class="inline">Male</label>
     </span> <span class="value">
     <input type="radio" name="gender" value="female">
     <label class="inline">Female</label>
     </span> <span class="value">
     <input type="radio" name="gender" value="neither">
     <label class="inline">N/A</label>
     </span> </div>
          </section>
          <section id="approval">
            <div>
              <label id="ratinglabel" for="rating">Order quality:</label>
              <select name="rating" id="dropdown">
                <option value="excellent">Excellent</option>
                <option value="good">Good</option>
                <option value="fair">Fair</option>
                <option value="poor">Poor</option>
              </select>
            </div>
          </section>
          <section id="comments">
            <div>
              <label id="messagelabel" for="message">Comments:</label>
              <textarea name="message" rows=4 cols=3 0 id="textinput">
            </textarea>
            </div>
          </section>
          <section id="submission">
            <div id="submit-form">
              <input type="submit" name="submit" id="submit">
            </div>
          </section>
        </form>
      </div>
    </main>
  </body>

  </html>

</body>

</html>

相关问题
最新问题