1. Hlavní stránka
  2. Otázka

Jak mohu úhledně seřadí checkbox a radio box

0

Otázka

Nejsem si jistý, jak jsem měl úhledně line vstupy v řadě. Snažil jsem se pomocí flex a position: relative (na štítku), ale to není práce pro mě. Snažím se, aby to vypadalo jako to například pro obě mé zaškrtávací políčka a rádií:

enter image description here

Ale to je to, co jsem dostal místo:

enter image description here

Vysvětlete prosím, jak bych mohl najít řešení tohoto problému.

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

Nejlepší odpověď

1

Vzal jsem si předchozí dotazy na média a dal sekcích těchto stylů.

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

Také jsem přidal <br> což je zalomení řádku prvek pod #dropdown-section vedle část uzavírací tag.

@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
Check-boxy vypadají skvěle, ale přepínačů zdát zvrácené. Také jsem chtěl vědět, jak linka je bez media query. Zdá se, že jsem to podělal tím, včetně médií dotazovány obrazu. Takže, budu aktualizovat můj příspěvek k objasnění mé otázky.
xirokif
@xirokif naleznete upravené řešení. Žádné dotazy médií zahrnuty. Můžete zavřít prostoru radio tlačítka a text na "doporučit kurz přítele" prostoru tím, že odstraní absolutní umístění na vašem input[type=radio] CSS. Nicméně, já osobně si myslím, že to vypadá čistě jako je.
Kameron

V jiných jazycích

Tato stránka je v jiných jazycích

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

Populární v této kategorii

Oblíbené položky v této kategorii

Nelze odstranit podtržení ani změnit barvu textu pomocí hypertextového odkazu
Změna velikosti písma vedle tlačítka rádia
Přidání hodnocení a Srdce ikony taky každý název filmu
existuje způsob, jak mít větší kontejnery v css [uzavřen]
tabulka.řádky[index].scrollIntoView() nefunguje
css 3d transformace rotate (x + y) pomocí myši přetáhněte
CSS Border Radius nefunguje v Safari po přepnutí do gatsby-plugin-image
Jak mohu dát dítě div na pravé horní?
Upravit mezery mezi text nebo slova v html
Jak přepsat výchozí výška Elastické combobox UI