我在表格中有一個表單：每個<td>標籤包含一個<select>或<input>，但是例如在這種情況下，由於第一個<td>的標籤的值比第二個標籤的值長，所以<input>或<select>字段不在同一行（請參見圖片）。如何修復tr標籤底部的輸入或選擇？

<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>

那麼，怎樣才能讓我的兩個領域堅持父元素的底部，讓他們在同一行，不管標籤有多少行佔據？

感謝您的閱讀。

來源

2017-05-30 Sebastian Delgado

請此代碼首先提供CSS。 –

@MichałDąbrowski它只使用bootstrap –

最簡單的解決方案是使用vertical-align css屬性並設置baseline或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>

OR

如果要對齊也標籤試試這個：

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>

來源

2017-05-30 21:41:26

但我想保持標籤對齊。 –

@SebastianDelgado我更新了第二個變體的答案。希望能幫助到你。我在這裏使用裸標籤選擇器，但最好有自定義類來指定頂級引導程序上的css行爲。 –

您可以絕對POSI但單元格底部的<select>元素儘管需要爲表格單元格的內容設置最小高度。

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>

來源

2017-05-30 22:04:26 miken32

如何修復tr標籤底部的輸入或選擇？

回答

OR

相關問題