En la siguiente versión de un formulario simple para "Detalles personales", los márgenes entre los campos son se muestra como se desea.

El formulario muestra 3 filas de campos:

  1. La fila 1 contiene el campo "Nombre" y la etiqueta.

  2. La fila 2 contiene el campo y la etiqueta "Apellido".

  3. La fila 3 es la fila de interés y contiene 2 campos (Ciudad y ZIP) entre los cuales se muestra correctamente un espacio, según se desee.

(He mostrado un borde verde para las etiquetas y un borde azul para los campos, para la depuración).

El CSS relevante es:

#city {
  width: 58%;
  margin-right: 2%;
}

#ZIP {
  width: 40%;
}

Los porcentajes aquí son 58, 2 (para el margen derecho del campo de la ciudad y 40, que suman 100%. Por lo tanto, estos 2 campos encajan en la fila. Como se indicó, esto funciona correctamente, según lo deseado.

Sin embargo, en la siguiente versión de la misma forma, en lugar de especificar el margen derecho dentro del CSS del campo en sí, he creado una clase. Inmediatamente, el diseño se rompe. Los 2 campos (ciudad y código postal) ya no caben en una fila. El campo ZIP se acomoda en la siguiente fila. Para asegurar que los 2 campos encajen en una fila, entonces tengo que ajustar los porcentajes como se muestra aquí. Pero entonces, el borde derecho del campo ZIP no se alinea con los bordes derechos del último campo en las otras filas.

El CSS relevante es el siguiente:

.lastfld {
  margin-right: 0;
}

#city {
  width: 58%;
}

#ZIP {
  width: 38%;
}

Tenga en cuenta que ahora los porcentajes (2, 58 y 38) suman solo 98% , dejando un espacio después del campo ZIP.

El marcado relevante es el siguiente:

<div class="row">
  <div class="col-lbl">
    <label>City / ZIP</label>
  </div>

  <div class="col-flds">
    <input type="text" 
           id="city" name="city" 
           placeholder="City">

    <input type="text" 
           class="lastfld" 
           id="ZIP" name="ZIP" 
           placeholder="ZIP">
  </div>
</div>

Me gustaría preguntar:

  1. Semánticamente, no he realizado ningún cambio. El cambio es solo en sintaxis. Anteriormente, puse la propiedad margin-right directamente dentro del campo. Funcionó. Más tarde, simplemente lo agregué dentro de una clase y apliqué la clase al campo en el marcado. Sin embargo, la fila se rompió. ¿Por qué pasó esto?

  2. ¿Cómo puedo resolver este problema?

  3. ¿Hay alguna otra forma (usando solo block / inline-block / float) para obtener el resultado deseado? Tenga en cuenta que para este fragmento de código, no estoy usando el diseño flexible o de cuadrícula , ya que este fragmento sería parte de un programa progresivamente mejorado.

* {
  box-sizing: border-box;
}

body {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  background-color: white;
}

h1 {
  text-align: center;
  color: navy;
}

.frm {
  /* border: 1px solid green; */
  width: 700px;
  margin: 0 auto;
  border-radius: 4px;
  padding: 20px 0;
  background-color: #f2f2f2; /* light gray */
}

.row {
  /*border: 1px dashed red;*/
  width: 100%;
  margin: 18px 0;
}

/* Clear floats after the columns */
.row::after {
  display: table;
  clear: both;
  content: "";
}

.col-lbl {
  display: inline-block;
  /*float: left;*/

  border: 1px dotted green;
  width: 100%;
  padding: 12px;
}

.col-flds {
  display: inline-block;
  float: left;

  border: 1px dotted blue;
  width: 100%;
}

input[type="text"],
select,
textarea {
  display: inline-block;
  float: left;

  border: 1px solid #ccc; /* light grey */
  margin-right: 2%; /* default right margin */
  padding: 12px 20px;
}

textarea {
  height: 200px;
  resize: none;
}

.lastfld {
  margin-right: 0;
}

input[type="text"]:focus,
select:focus,
textarea:focus {
  border: 2px solid #555;
}

#fname,
#lname {
  width: 100%;
}

#city {
  width: 58%;
}

#ZIP {
  width: 38%;
}
<code>Please watch in full page view</code><br>
<h1>PERSONAL DETAILS - 3</h1>

<div class="frm">
  <form action="/action_page.php">
    <div class="row">
      <div class="col-lbl">
        <label for="fname">First Name</label>
      </div>

      <div class="col-flds">
        <input type="text" class="lastfld" id="fname" name="firstname" placeholder="Your first name">
      </div>
    </div>

    <div class="row">
      <div class="col-lbl">
        <label for="lname">Last Name</label>
      </div>

      <div class="col-flds">
        <input type="text" class="lastfld" id="lname" name="lastname" placeholder="Your last name">
      </div>
    </div>

    <div class="row">
      <div class="col-lbl">
        <label>City / ZIP</label>
      </div>

      <div class="col-flds">
        <input type="text" id="city" name="city" placeholder="City">

        <input type="text" class="lastfld" id="ZIP" name="ZIP" placeholder="ZIP">
      </div>
    </div>
  </form>
</div>
2
SSteven 10 may. 2019 a las 11:57

3 respuestas

La mejor respuesta

Creo que el selector input[type="text"], select, textarea tiene una especificidad más alta que su clase .lastfld, por lo que el margin-right: 2% termina anulando su margin-right: 0;.

Para solucionarlo, puede darle una mayor especificidad fusionando los selectores:

input[type="text"].lastfld {margin-right: 0;}

Otra ruta sería agregar ´! Important ‘a su atributo css; esto le dará automáticamente la mayor especificidad, pero le sugiero que no siga ese camino. En mi experiencia, usar! Importants te morderá en la parte de atrás la mayoría de las veces.

* {
  box-sizing: border-box;
}

body {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  background-color: white;
}

h1 {
  text-align: center;
  color: navy;
}

.frm {
  /* border: 1px solid green; */
  width: 700px;
  margin: 0 auto;
  border-radius: 4px;
  padding: 20px 0;
  background-color: #f2f2f2; /* light gray */
}

.row {
  /*border: 1px dashed red;*/
  width: 100%;
  margin: 18px 0;
}

/* Clear floats after the columns */
.row::after {
  display: table;
  clear: both;
  content: "";
}

.col-lbl {
  display: inline-block;
  /*float: left;*/

  border: 1px dotted green;
  width: 100%;
  padding: 12px;
}

.col-flds {
  display: inline-block;
  float: left;

  border: 1px dotted blue;
  width: 100%;
}

input[type="text"],
select,
textarea {
  display: inline-block;
  float: left;

  border: 1px solid #ccc; /* light grey */
  margin-right: 2%; /* default right margin */
  padding: 12px 20px;
}

textarea {
  height: 200px;
  resize: none;
}

input[type="text"].lastfld {margin-right: 0;}

input[type="text"]:focus,
select:focus,
textarea:focus {
  border: 2px solid #555;
}

#fname,
#lname {
  width: 100%;
}

#city {
  width: 58%;
}

#ZIP {
  width: 40%;
}
<h1>PERSONAL DETAILS - 3</h1>

<div class="frm">
  <form action="/action_page.php">
    <div class="row">
      <div class="col-lbl">
        <label for="fname">First Name</label>
      </div>

      <div class="col-flds">
        <input type="text" class="lastfld" id="fname" name="firstname" placeholder="Your first name">
      </div>
    </div>

    <div class="row">
      <div class="col-lbl">
        <label for="lname">Last Name</label>
      </div>

      <div class="col-flds">
        <input type="text" class="lastfld" id="lname" name="lastname" placeholder="Your last name">
      </div>
    </div>

    <div class="row">
      <div class="col-lbl">
        <label>City / ZIP</label>
      </div>

      <div class="col-flds">
        <input type="text" id="city" name="city" placeholder="City">

        <input type="text" class="lastfld" id="ZIP" name="ZIP" placeholder="ZIP">
      </div>
    </div>
  </form>
</div>
3
Jonas Grumann 10 may. 2019 a las 09:34

Use float para esto obtendrá el resultado deseado Lo he hecho, por favor verifíquelo.

#city {
  width: 58%;
  margin-right: 2%;
  float: left;
}

.lastfld {
  margin-right: 0;
}

#city {
  width: 58%;
}

#ZIP {
  width: 38%;
  float: right;
}
<div class="row">
  <div class="col-lbl">
    <label>City / ZIP</label>
  </div>

  <div class="col-flds">
    <input type="text" 
           id="city" name="city" 
           placeholder="City">

    <input type="text" 
           class="lastfld" 
           id="ZIP" name="ZIP" 
           placeholder="ZIP">
  </div>
</div>
0
Arindam Sarkar 10 may. 2019 a las 09:26

El siguiente código obtiene la prioridad de margen derecho aquí

input[type="text"], select, textarea {
    display: inline-block;
    float: left;
    border: 1px solid #ccc;
    margin-right: 2%;
    padding: 12px 20px;
}

Dos caminos

Especifique con selector y es la manera perfecta.

input[type="text"].lastfld {
    margin-right: 0px
}

O uso importante. Pero no se recomienda usar! Important.

.lastfld {
    margin-right: 0 !important;
}
0
Abdullah 12 may. 2019 a las 16:46