1. 首页
  2. 的问题

我怎么能整齐地排框和无线电盒

0

的问题

我不知道我是怎么露面信息的整齐线路输入一个行。 我试图使用flex和 position: relative (标签)，但没有为我工作。 我想让它看起来像这样的例如为我的选择框并收音机：

enter image description here

但这是我得到了什么，而不是:

enter image description here

请解释一下我如何能找到一个解决这个问题。

https://codepen.io/Yisego45873/pen/WNEJPVx

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&family=Quicksand&display=swap');

* {
  box-sizing: border-box;
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-family: 'Quicksand', sans-serif;
}

body {
  background: linear-gradient(40deg, transparent 40%, rgb(41, 39, 39)), linear-gradient(-40deg, rgb(78, 75, 75) 20%, #81777d 90%);
}

header {
  color: white;
}

div {
  background-color: rgb(68, 65, 65);
  padding: 35px;
  opacity: 200%;
  margin: 0 30px;
  border: rgb(41, 39, 39) solid 3px;
  border-radius: 3px;
  margin-bottom: 20px;
}

form {
  color: white;
}

#sect-1 label {
  margin: 0 0 15px;
  color: white;
}

#sect-1 input {
  border: white;
  width: 50%;
  border-radius: 2px;
  padding: 10px;
  margin: 15px;
}

select {
  border: white;
  width: 50%;
  color: #4d4a4a;
  border-radius: 1px;
  padding: 10px;
  margin: 15px;
  color: black;
}

span {
  font-style: italic;
  opacity: 80%;
}

select option {
  color: black;
}

#range {
  width: 50%;
}

input[type=checkbox] {
  -ms-transform: scale(1.5);
  /* IE */
  -moz-transform: scale(1.5);
  /* FF */
  -webkit-transform: scale(1.5);
  /* Safari and Chrome */
  -o-transform: scale(1.5);
  /* Opera */
  transform: scale(1.5);
}

input[type=radio] {
  /* IE */
  -ms-transform: scale(1.4);
  /* FF */
  -moz-transform: scale(1.4);
  /* Safari and Chrome */
  -webkit-transform: scale(1.4);
  /* Opera */
  -o-transform: scale(1.4);
  transform: scale(1.4);
  position: absolute;
  left: 300px;
}

textarea {
  padding: 5px;
  margin: auto;
  /* IE */
  -ms-transform: scale(1.4);
  /* FF */
  -moz-transform: scale(1.4);
  /* Safari and Chrome */
  -webkit-transform: scale(1.4);
  /* Opera */
  -o-transform: scale(1.4);
  transform: scale(1.4);
  color: black;
  margin-bottom: 50px;
  margin-top: 50px;
  text-align: left;
}

label {
  margin-top: 30px;
  margin-bottom: 5px;
}

#sect-1 {
  color: black;
}

input[type=submit] {
  background-color: rgb(41, 39, 39);
  border: rgb(41, 39, 39) 10px solid;
  width: 50%;
  margin-top: 10px;
  border-radius: 5px;
}

input[type=submit]:hover {
  background-color: rgb(110, 108, 108);
  border: 10px solid rgb(110, 108, 108);
  cursor: pointer;
}

#range-section {
  margin-bottom: 15px;
}

#sect-2,
#sect-3 {
  display: flex;
}

#sect-2,
#sect-3 label {
  position: relative;
}
<header>
  <h1 id="title">Art Course Survey Page</h1>
  <p id="description">Any feedback would be appreciated.</p>
</header>

<div>
  <form id="survey-form" action="#" method="post">
    <section id="sect-1">
      <label id="name-label" for="name">Name</label><br />
      <input type="text" name="name" id="name" placeholder="Enter your name" required="required" /><br />

      <label id="email-label" for="email">Email</label><br />
      <input type="email" name="email" id="email" placeholder="Enter your email address" required="required" /><br />

      <label id="number-label" for="number">Age <span>(optional)</span></label><br />
      <input type="number" name="number" id="number" placeholder="Age" min="1" max="99" /><br />

      <label id="gender" for="gender-drop">Gender <span>(optional)</span></label><br />
      <select name="gender" id="gender-drop">
        <option value="male">Male</option>
        <option value="female">Female</option>
      </select>
    </section>

    <section id="dropdown-section">
      <label for="dropdown">Which course did you take?</label><br />
      <select required="required" name="course" id="dropdown" size="1">
        <option value="level1">Beginner Course</option>
        <option value="level2">Beginner-Intermediate Course</option>
        <option value="level3">Intermediate Course</option>
        <option value="level4">Advanced Course</option>
        <option value="level5">Expert Course</option>
      </select>
    </section>

    <br />

    <section id="range-section">
      <label for="range">How was your experience?</label><br />
      <small>Terrible!</small>
      <input type="range" required="required" id="range" name="range" min="0" max="4" value="0" /><small>Excellent!</small>
    </section>

    <section id="sect-2">
      <label for="y/n"> Would you recommend this course to a friend?</label><br />

      <label for="yes">
        <input type="radio" required="required" id="yes" name="y/n" value="Yes" checked="checked" />
        Yes
      </label><br />

      <label for="no">
        <input type="radio" required="required" id="no" name="y/n" value="No" /> No
      </label><br />

      <label for="maybe">
        <input type="radio" required="required" id="maybe" name="y/n" value="Maybe" /> Maybe
      </label><br />
    </section>

    <section id="sect-3">
      <p>What would you like to see improved? <span>(Check all that apply)</span></p>
      <label for="improve1">
        <input type="checkbox" id="improve1" name="improve1" value="Layout" /> Course
        Layout/Paths
      </label><br />

      <label for="improve2">
        <input type="checkbox" id="improve2" name="improve2" value="Videos" /> Course
        Videos/Instruction
      </label><br />

      <label for="improve3">
        <input type="checkbox" id="improve3" name="improve3" value="Community" />
        Community Features
      </label><br />

      <label for="improve4">
        <input type="checkbox" id="improve4" name="improve4" value="Support-Help" /> Support
      </label><br />

      <label for="improve5">
        <input type="checkbox" id="improve5" name="improve5" value="Other" /> Other
      </label>
    </section>

    <section id="sect-4">
      <!-- <label id="txt-label" for="textarea">Any extra comments are welcome!</label> -->
      <textarea rows="4" cols="50" id="textarea" placeholder="Any extra comments, suggestions, and complaints go here."></textarea><br />
      <input id="submit" type="submit" value="Submit" style="color: white;" />
    </section>
  </form>
</div>

css flexbox input
2021-11-22 23:18:03
1

最好的答案

1

我把以前的媒体查询和刚给了部分这些风格。

  section#sect-2,
  section#sect-3 {
    text-align: left;
    display: inline-block;
  }

我也加入 <br> 这是一条线断元件下你的 #dropdown-section 接下来你最后一节的标签。

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&family=Quicksand&display=swap');

* {
    box-sizing: border-box;
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-family: 'Quicksand', sans-serif;
}

body {
    background: linear-gradient(40deg, transparent 40%, rgb(41, 39, 39)),
        linear-gradient(-40deg, rgb(78, 75, 75) 20%, #81777d 90%);
}

header {
    color: white;
}

div {
    background-color: rgb(68, 65, 65);
    padding: 35px;
    opacity: 200%;
    margin: 0 30px;
    border: rgb(41, 39, 39) solid 3px;
    border-radius: 3px;
    margin-bottom: 20px;
}

form {
    color: white;
}

#sect-1 label {
    margin: 0 0 15px;
    color: white;
}

#sect-1 input {
    border: white;
    width: 50%;
    border-radius: 2px;
    padding: 10px;
    margin: 15px;
}

select {
    border: white;
    width: 50%;
    color: #4d4a4a;
    border-radius: 1px;
    padding: 10px;
    margin: 15px;
    color: black;
}

span {
    font-style: italic;
    opacity: 80%;
}

select option {
    color: black;
}

#range {
    width: 50%;
}

input[type=checkbox] {
    -ms-transform: scale(1.5);
    /* IE */
    -moz-transform: scale(1.5);
    /* FF */
    -webkit-transform: scale(1.5);
    /* Safari and Chrome */
    -o-transform: scale(1.5);
    /* Opera */
    transform: scale(1.5);
}

input[type=radio] {
    /* IE */
    -ms-transform: scale(1.4);
    /* FF */
    -moz-transform: scale(1.4);
    /* Safari and Chrome */
    -webkit-transform: scale(1.4);
    /* Opera */
    -o-transform: scale(1.4);
    transform: scale(1.4);
    position: absolute;
    left: 300px;

}

textarea {
    padding: 5px;
    margin: auto;
    /* IE */
    -ms-transform: scale(1.4);
    /* FF */
    -moz-transform: scale(1.4);
    /* Safari and Chrome */
    -webkit-transform: scale(1.4);
    /* Opera */
    -o-transform: scale(1.4);
    transform: scale(1.4);
    color: black;
    margin-bottom: 50px;
    margin-top: 50px;
    text-align: left;
}

label {
    margin-top: 30px;
    margin-bottom: 5px;
}

#sect-1{
    color: black;
}

input[type=submit] {
    background-color: rgb(41, 39, 39);
    border: rgb(41, 39, 39) 10px solid;
    width: 50%;
    margin-top: 10px;
    border-radius: 5px;
}

input[type=submit]:hover {
    background-color: rgb(110, 108, 108);
    border: 10px solid rgb(110, 108, 108);
    cursor: pointer;
}

#range-section{
    margin-bottom: 15px;
}

#sect-2, #sect-3{
    display: flex;
}

#sect-2, #sect-3 label{
    position: relative;
}


  section#sect-2,
  section#sect-3 {
    text-align: left;
    display: inline-block;
  }
<header>
  <h1 id="title">Art Course Survey Page</h1>
  <p id="description">Any feedback would be appreciated.</p>
</header>

<div>
  <form id="survey-form" action="#" method="post">
    <section id="sect-1">
      <label id="name-label" for="name">Name</label><br />
      <input type="text" name="name" id="name" placeholder="Enter your name" required="required" /><br />

      <label id="email-label" for="email">Email</label><br />
      <input type="email" name="email" id="email" placeholder="Enter your email address" required="required" /><br />

      <label id="number-label" for="number">Age <span>(optional)</span></label><br />
      <input type="number" name="number" id="number" placeholder="Age" min="1" max="99" /><br />

      <label id="gender" for="gender-drop">Gender <span>(optional)</span></label><br />
      <select name="gender" id="gender-drop">
        <option value="male">Male</option>
        <option value="female">Female</option>
      </select>
    </section>

    <section id="dropdown-section">
      <label for="dropdown">Which course did you take?</label><br />
      <select required="required" name="course" id="dropdown" size="1">
        <option value="level1">Beginner Course</option>
        <option value="level2">Beginner-Intermediate Course</option>
        <option value="level3">Intermediate Course</option>
        <option value="level4">Advanced Course</option>
        <option value="level5">Expert Course</option>
      </select>
    </section>

    <br>

    <section id="range-section">
      <label for="range">How was your experience?</label><br />
      <small>Terrible!</small>
      <input type="range" required="required" id="range" name="range" min="0" max="4" value="0" /><small>Excellent!</small>
    </section>

    <section id="sect-2">
      <label for="y/n"> Would you recommend this course to a friend?</label><br />

      <label for="yes">
        <input type="radio" required="required" id="yes" name="y/n" value="Yes" checked="checked" />
        Yes
      </label><br />

      <label for="no">
        <input type="radio" required="required" id="no" name="y/n" value="No" /> No
      </label><br />

      <label for="maybe">
        <input type="radio" required="required" id="maybe" name="y/n" value="Maybe" /> Maybe
      </label><br />
    </section><br>

    <section id="sect-3">
      <p>What would you like to see improved? <span>(Check all that apply)</span></p>
      <label for="improve1">
        <input type="checkbox" id="improve1" name="improve1" value="Layout" /> Course
        Layout/Paths
      </label><br />

      <label for="improve2">
        <input type="checkbox" id="improve2" name="improve2" value="Videos" /> Course
        Videos/Instruction
      </label><br />

      <label for="improve3">
        <input type="checkbox" id="improve3" name="improve3" value="Community" />
        Community Features
      </label><br />

      <label for="improve4">
        <input type="checkbox" id="improve4" name="improve4" value="Support-Help" /> Support
      </label><br />

      <label for="improve5">
        <input type="checkbox" id="improve5" name="improve5" value="Other" /> Other
      </label>
    </section>

    <section id="sect-4">
      <!-- <label id="txt-label" for="textarea">Any extra comments are welcome!</label> -->
      <textarea rows="4" cols="50" id="textarea" placeholder="Any extra comments, suggestions, and complaints go here."></textarea><br />
      <input id="submit" type="submit" value="Submit" style="color: white;" />
    </section>
  </form>
</div>

2021-11-23 19:20:39
检查盒看起来很棒，但无线电按钮似乎搞砸了。 此外，我想知道如何行他们没有媒体的查询。 我似乎已经搞砸了通过包括媒体查询图像。 因此，我将更新我的职务，以澄清我的问题。
xirokif
@xirokif请参阅调整的解决方案。 没有媒体的查询包括在内。 你可以闭空间的无线电按钮和文字上的"建议的过程要一个朋友"的区域通过删除的绝对位上你 input[type=radio] CSS。 然而，我个人认为它看起来干净。
Kameron

其他语言

此页面有其他语言版本

Русский
..................................................................................................................
Ссылка
Italiano
..................................................................................................................
Link
Polski
..................................................................................................................
Link
Română
..................................................................................................................
Legătură
한국어
..................................................................................................................
링크
हिन्दी
..................................................................................................................
लिंक
Français
..................................................................................................................
Lien
Türk
..................................................................................................................
Atıf
Česk
..................................................................................................................
Odka
Português
..................................................................................................................
Referênci
ไทย
..................................................................................................................
เชื่อมโยง
Español
..................................................................................................................
Referencia
Slovenský
..................................................................................................................
Odkaz

受欢迎的此类别

流行的问题，在这个类别

不能删除了强调也不改变案文的颜色使用超级链接
改变字体大小旁边的一个无线电按钮
增加收视率和心的图标过的每部电影的名字
有没有办法有更大的容器在css[封闭]
表。行[指标].scrollIntoView()不工作
css3d旋转的变换(x+y)使用小鼠拖
CSS边界半径不在野生动物在切换到盖茨-插图像
我怎么能把孩子div在右边的顶?
调整的空间之间的文本或说html
如何复盖默认的高度的弹性UI组合框