Wie man eine Eingabe oder eine Auswahl an der Unterseite eines tr-Tags repariert?

Question

Ich habe eine Form in einer Tabelle: jeder <td> Tag enthält entweder ein <select> oder <input>, aber beispielsweise in diesem Fall, da der Wert der ersten <td> ‚s Label länger ist als die auf dem zweiten, die <input> oder <select> Felder sind nicht in der gleichen Zeile (siehe Bild).

<tr>   
    <td> 
     <div class="form-group select optional personal_conflict_victim"> 
      <label class="control-label select optional" for="personal_conflict_victim">¿USTED ES VÍCTIMA DEL CONFLICTO ARMADO Y SE ENCUENTRA INCLUIDO EN EL REGISTRO ÚNICO DE VÍCTIMAS?</label> 
      <select class="form-control select optional" name="personal[conflict_victim]" id="personal_conflict_victim"><option value="">SELECCIONE</option> 
       <option value="true">Si</option> 
       <option value="false">No</option> 
      </select> 
     </div> 
    </td> 
    <td> 
     <div class="form-group select optional personal_victimizing_fact"> 
      <label class="control-label select optional" for="personal_victimizing_fact">¿CUÁL ES EL HECHO VICTIMIZANTE?</label> 
      <select class="form-control select optional" name="personal[victimizing_fact]" id="personal_victimizing_fact"> 
       <option value="">SELECCIONE</option> 
       <option value="Desaparición forzada">Desaparición forzada</option> 
       <option value="Secuestro">Secuestro</option> 
       <option value="Reclutamiento forzado y utilización">Reclutamiento forzado y utilización</option> 
       <option value="Desplazamiento">Desplazamiento</option> 
       <option value="Homicidio">Homicidio</option> 
       <option value="Masacre">Masacre</option> 
       <option value="Minas antipersona - Munición sin explotar MAP-MUSE">Minas antipersona - Munición sin explotar MAP-MUSE</option> 
       <option value="Tortura o tratos crueles, inhumanos o degradantes">Tortura o tratos crueles, inhumanos o degradantes</option> 
       <option value="Lesiones personales (permanentes o transitorias)">Lesiones personales (permanentes o transitorias)</option> 
       <option value="Delitos contra la integridad y libertad sexual">Delitos contra la integridad y libertad sexual</option> 
       <option value="Despojo">Despojo</option> 
       <option value="Daño en bienes muebles o inmuebles (terrorismo)- Amenaza a la vida, integridad y seguridad personal">Daño en bienes muebles o inmuebles (terrorismo)- Amenaza a la vida, integridad y seguridad personal</option> 
      </select> 
     </div> 
    </td>   
</tr> 

Also, wie kann ich meine zwei Felder auf der Unterseite des übergeordneten Elements halten, sie in der gleichen Linie zu halten, egal wie viele Zeilen die Etiketten besetzen?

Danke fürs Lesen.

Answer 1

Die einfachste Lösung ist die Verwendung vertical-align CSS-Eigenschaft und setzen baseline oder bottom.

table { 
 
    width: 100%; 
 
} 
 

 
td { 
 
    vertical-align: bottom; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <div class="form-group select optional personal_conflict_victim"> 
 
     <label class="control-label select optional" for="personal_conflict_victim">¿USTED ES VÍCTIMA DEL CONFLICTO ARMADO Y SE ENCUENTRA INCLUIDO EN EL REGISTRO ÚNICO DE VÍCTIMAS?</label> 
 
     <select class="form-control select optional" name="personal[conflict_victim]" id="personal_conflict_victim"><option value="">SELECCIONE</option> 
 
       <option value="true">Si</option> 
 
       <option value="false">No</option> 
 
      </select> 
 
     </div> 
 
    </td> 
 
    <td> 
 
     <div class="form-group select optional personal_victimizing_fact"> 
 
     <label class="control-label select optional" for="personal_victimizing_fact">¿CUÁL ES EL HECHO VICTIMIZANTE?</label> 
 
     <select class="form-control select optional" name="personal[victimizing_fact]" id="personal_victimizing_fact"> 
 
       <option value="">SELECCIONE</option> 
 
       <option value="Desaparición forzada">Desaparición forzada</option> 
 
       <option value="Secuestro">Secuestro</option> 
 
       <option value="Reclutamiento forzado y utilización">Reclutamiento forzado y utilización</option> 
 
       <option value="Desplazamiento">Desplazamiento</option> 
 
       <option value="Homicidio">Homicidio</option> 
 
       <option value="Masacre">Masacre</option> 
 
       <option value="Minas antipersona - Munición sin explotar MAP-MUSE">Minas antipersona - Munición sin explotar MAP-MUSE</option> 
 
       <option value="Tortura o tratos crueles, inhumanos o degradantes">Tortura o tratos crueles, inhumanos o degradantes</option> 
 
       <option value="Lesiones personales (permanentes o transitorias)">Lesiones personales (permanentes o transitorias)</option> 
 
       <option value="Delitos contra la integridad y libertad sexual">Delitos contra la integridad y libertad sexual</option> 
 
       <option value="Despojo">Despojo</option> 
 
       <option value="Daño en bienes muebles o inmuebles (terrorismo)- Amenaza a la vida, integridad y seguridad personal">Daño en bienes muebles o inmuebles (terrorismo)- Amenaza a la vida, integridad y seguridad personal</option> 
 
      </select> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

ODER

Wenn Sie auch die Etiketten ausrichten wollen versuchen, dieses:

table { 
 
    width: 100%; 
 
} 
 
td { 
 
    vertical-align: top; 
 
    position: relative; 
 
    width: 50%; 
 
} 
 
label { 
 
    padding-bottom: 30px; 
 
} 
 
select { 
 
    position: absolute; 
 
    bottom: 0; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
    <table> 
 
     <tr> 
 
     <td> 
 
      <div class="form-group select optional personal_conflict_victim"> 
 
      <label class="control-label select optional" for="personal_conflict_victim">¿USTED ES VÍCTIMA DEL CONFLICTO ARMADO Y SE ENCUENTRA INCLUIDO EN EL REGISTRO ÚNICO DE VÍCTIMAS?</label> 
 
      <select class="form-control select optional" name="personal[conflict_victim]" id="personal_conflict_victim"><option value="">SELECCIONE</option> 
 
        <option value="true">Si</option> 
 
        <option value="false">No</option> 
 
       </select> 
 
      </div> 
 
     </td> 
 
     <td> 
 
      <div class="form-group select optional personal_victimizing_fact"> 
 
      <label class="control-label select optional" for="personal_victimizing_fact">¿CUÁL ES EL HECHO VICTIMIZANTE?</label> 
 
      <select class="form-control select optional" name="personal[victimizing_fact]" id="personal_victimizing_fact"> 
 
        <option value="">SELECCIONE</option> 
 
        <option value="Desaparición forzada">Desaparición forzada</option> 
 
        <option value="Secuestro">Secuestro</option> 
 
        <option value="Reclutamiento forzado y utilización">Reclutamiento forzado y utilización</option> 
 
        <option value="Desplazamiento">Desplazamiento</option> 
 
        <option value="Homicidio">Homicidio</option> 
 
        <option value="Masacre">Masacre</option> 
 
        <option value="Minas antipersona - Munición sin explotar MAP-MUSE">Minas antipersona - Munición sin explotar MAP-MUSE</option> 
 
        <option value="Tortura o tratos crueles, inhumanos o degradantes">Tortura o tratos crueles, inhumanos o degradantes</option> 
 
        <option value="Lesiones personales (permanentes o transitorias)">Lesiones personales (permanentes o transitorias)</option> 
 
        <option value="Delitos contra la integridad y libertad sexual">Delitos contra la integridad y libertad sexual</option> 
 
        <option value="Despojo">Despojo</option> 
 
        <option value="Daño en bienes muebles o inmuebles (terrorismo)- Amenaza a la vida, integridad y seguridad personal">Daño en bienes muebles o inmuebles (terrorismo)- Amenaza a la vida, integridad y seguridad personal</option> 
 
       </select> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
    </table>

Answer 2

Sie können absolut posi Das Element <select> befindet sich am unteren Rand der Zelle, erfordert jedoch eine Mindesthöhe für den Inhalt der Tabellenzelle.

td { 
 
    position: relative; 
 
} 
 

 
td div.select { 
 
    min-height: 150px; 
 
} 
 

 
td select { 
 
    position: absolute; 
 
    bottom: 0; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <div class="form-group select optional personal_conflict_victim"> 
 
     <label class="control-label select optional" for="personal_conflict_victim">¿USTED ES VÍCTIMA DEL CONFLICTO ARMADO Y SE ENCUENTRA INCLUIDO EN EL REGISTRO ÚNICO DE VÍCTIMAS?</label> 
 
     <select class="form-control select optional" name="personal[conflict_victim]" id="personal_conflict_victim"><option value="">SELECCIONE</option> 
 
       <option value="true">Si</option> 
 
       <option value="false">No</option> 
 
      </select> 
 
     </div> 
 
    </td> 
 
    <td> 
 
     <div class="form-group select optional personal_victimizing_fact"> 
 
     <label class="control-label select optional" for="personal_victimizing_fact">¿CUÁL ES EL HECHO VICTIMIZANTE?</label> 
 
     <select class="form-control select optional" name="personal[victimizing_fact]" id="personal_victimizing_fact"> 
 
       <option value="">SELECCIONE</option> 
 
       <option value="Desaparición forzada">Desaparición forzada</option> 
 
       <option value="Secuestro">Secuestro</option> 
 
       <option value="Reclutamiento forzado y utilización">Reclutamiento forzado y utilización</option> 
 
       <option value="Desplazamiento">Desplazamiento</option> 
 
       <option value="Homicidio">Homicidio</option> 
 
       <option value="Masacre">Masacre</option> 
 
       <option value="Minas antipersona - Munición sin explotar MAP-MUSE">Minas antipersona - Munición sin explotar MAP-MUSE</option> 
 
       <option value="Tortura o tratos crueles, inhumanos o degradantes">Tortura o tratos crueles, inhumanos o degradantes</option> 
 
       <option value="Lesiones personales (permanentes o transitorias)">Lesiones personales (permanentes o transitorias)</option> 
 
       <option value="Delitos contra la integridad y libertad sexual">Delitos contra la integridad y libertad sexual</option> 
 
       <option value="Despojo">Despojo</option> 
 
       <option value="Daño en bienes muebles o inmuebles (terrorismo)- Amenaza a la vida, integridad y seguridad personal">Daño en bienes muebles o inmuebles (terrorismo)- Amenaza a la vida, integridad y seguridad personal</option> 
 
      </select> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>