Tengo este código html y css, ¿por qué si hago clic en "Sí" la casilla de verificación "No" se desactiva? Me gustaría que cuando haga clic en la casilla de verificación "Sí", la casilla de verificación "No" permanezca en línea con la casilla de verificación "Sí"

fieldset {
  width: 920px;
  border: 2px ridge green;
  padding: 10px;
  margin-bottom: 10px;
}

legend {
  font-weight: bold;
}

#n {
  display: none;
}

#y {
  display: none;
}

#m:checked~#n {
  display: block;
}

#a:checked~#y {
  display: block;
}

li {
  list-style-type: none;
}
<form>
  <fieldset>
    <legend>Have you a car? </legend>
    <label for="m">Yes</label>
    <input id="m" type="checkbox">
    <nav id="n">
      <ul>
        <li>ok</li>
      </ul>
    </nav>
    <label for="y">No</label>
    <input id="a" type="checkbox">
    <nav id="y">
      <ul>
        <li> ops</li>
      </ul>
    </nav>
  </fieldset>
</form>
0
arcadyia 25 sep. 2019 a las 11:47

3 respuestas

La mejor respuesta

Simplemente mueva el navegador para que no haya un elemento de bloque entre las casillas de verificación

También hazlas radios:

fieldset {
  width: 920px;
  border: 2px ridge green;
  padding: 10px;
  margin-bottom: 10px;
}

legend {
  font-weight: bold;
}

#n {
  display: none;
}

#y {
  display: none;
}

#m:checked~#n {
  display: block;
}

#a:checked~#y {
  display: block;
}

li {
  list-style-type: none;
}
<form>
  <fieldset>
    <legend>Have you a car? </legend>
    <label for="m">Yes</label>
    <input id="m" type="radio" name="car">
    <label for="y">No</label>
    <input id="a" type="radio" name="car">
    <nav id="y">
      <ul>
        <li> ops</li>
      </ul>
    </nav>
    <nav id="n">
      <ul>
        <li>ok</li>
      </ul>
    </nav>
  </fieldset>
</form>
2
mplungjan 25 sep. 2019 a las 08:56

Porque configura display:block cuando muestra nav. Use inline-block o inline si desea que nav esté en la misma línea con las casillas de verificación. Agregue también margin:0 a ul para sobrescribir el margen predeterminado de la lista.

fieldset {
  width: 920px;
  border: 2px ridge green;
  padding: 10px;
  margin-bottom: 10px;
}

legend {
  font-weight: bold;
}

#n {
  display: none;
}

#y {
  display: none;
}

#m:checked~#n {
  display: inline-block;
}

#a:checked~#y {
  display: inline-block;
}

li {
  list-style-type: none;

}
ul {
  margin: 0;
  padding:0;
  }
<form>
  <fieldset>
    <legend>Have you a car? </legend>
    <label for="m">Yes</label>
    <input id="m" type="checkbox">
    <nav id="n">
      <ul>
        <li>ok</li>
      </ul>
    </nav>
    <label for="y">No</label>
    <input id="a" type="checkbox">
    <nav id="y">
      <ul>
        <li> ops</li>
      </ul>
    </nav>
  </fieldset>
</form>
1
Mihai T 25 sep. 2019 a las 08:51

Usaste nav, ul, li, todos son elementos de nivel de bloque. Puede mejorar su marcado html o si desea seguir con este marcado, haga que su nav, ul, li se muestre en línea.

<nav id="n">
    <ul>
      <li>ok</li>
    </ul>
 </nav>
#m:checked~#n,#n ul, #n li {
  display: inline;
}

O puede usar solo nav allí y eliminar ul, li

<nav id="n">
    ok
 </nav>
#m:checked~#n{
  display: inline;
}

La mejor idea es cambiar su marcado html y hacerlo mejor así.

 <span id="n">
    ok
 </span>
#m:checked~#n{
  display: inline;
}
0
Imran Fakhrul 25 sep. 2019 a las 09:03