CSS對齊3個HTML元素，沒有訪問HTML

Question

不幸的是我只需要查看的HTML的能力，但我能夠編輯CSS

有3個元素（但4周div的），可以從瀏覽器中查看

我已經把它們放在一個邊框上，以使它們清晰。 Click to View

<li id="area--5F43005:RESOCCHAZ--5F1" class="row"> 
    <fieldset> 
     <div class="col_question"> 
      4. As part of your occupation, do you work at etc. ect. 
     </div> 

     <div class="holder"> 
      <input type="hidden" name="43005:RESOCCHAZ--5F1_life_1" id="trigger_43005:RESOCCHAZ--5F1_life_1" value="true"> 

      <div class="col_answer" id="answ_43005:RESOCCHAZ--5F1_life_1"> 
       No&nbsp; 
      </div> 

      <div class="col_select"> 
       <input id="btn_true_43005:RESOCCHAZ--5F1_life_1" name="btn_true_43005:RESOCCHAZ--5F1_life_1" class="ure_btn" type="submit"> 
       <input id="btn_false_43005:RESOCCHAZ--5F1_life_1" name="btn_false_43005:RESOCCHAZ--5F1_life_1" class="ure_btn" type="button" value="no"> 
      </div> 
     </div> 
    </fieldset> 
</li> 

我想要的3個元素是通過側相同的寬度和側，以在頂部/底部節省空間。

三個要素必須保持相同的比率不管問題/文

這裏的長度是我的CSS

.col_question{ 
display: inline-block; 
border-style: groove; 
padding:6px; 
} 

.col_answer{ 
display: inline-block; 
border-style: groove; 
padding:6px; 
} 

.col_select{ 
border-style: groove; 
padding:6px; 
} 

fieldset{ 
border:none; 
-webkit-margin-start: 0px; 
-webkit-margin-end: 0px; 
-webkit-padding-before: 0px; 
-webkit-padding-start: 0px; 
-webkit-padding-end:0px; 
-webkit-padding-after:0px; 
min-width:0px; 
} 

我已經試過各種CSS元素，但似乎沒有任何工作。開始懷疑它的父親ol，div或容器需要添加CSS元素的元素。

Answer 1

舊校園的解決辦法是使用float:left;width:33.33%也使用box-sizing:border-box摻入該元素的寬度

內部邊界見下面的代碼段和/或>fiddle

li { 
 
\t list-style:none 
 
} 
 
.col_question{ 
 
display: inline-block; 
 
border-style: groove; 
 
padding:6px; 
 
float:left;width:33.33%; 
 
box-sizing:border-box; 
 
} 
 

 
.col_answer{ 
 
display: inline-block; 
 
border-style: groove; 
 
box-sizing:border-box; 
 
padding:6px; 
 
float:left;width:33.33%; 
 
} 
 

 
.col_select{ 
 
border-style: groove; 
 
padding:6px; 
 
float:left;width:33.33%; 
 
box-sizing:border-box; 
 
} 
 

 
fieldset{ 
 
border:none; 
 
-webkit-margin-start: 0px; 
 
-webkit-margin-end: 0px; 
 
-webkit-padding-before: 0px; 
 
-webkit-padding-start: 0px; 
 
-webkit-padding-end:0px; 
 
-webkit-padding-after:0px; 
 
min-width:0px; 
 

 
}

<li id="area--5F43005:RESOCCHAZ--5F1" class="row"> 
 
    <fieldset> 
 
     <div class="col_question"> 
 
      4. As part of your occupation, do you work at etc. ect. 
 
     </div> 
 

 
     <div class="holder"> 
 
      <input type="hidden" name="43005:RESOCCHAZ--5F1_life_1" id="trigger_43005:RESOCCHAZ--5F1_life_1" value="true"> 
 

 
      <div class="col_answer" id="answ_43005:RESOCCHAZ--5F1_life_1"> 
 
       No&nbsp; 
 
      </div> 
 

 
      <div class="col_select"> 
 
       <input id="btn_true_43005:RESOCCHAZ--5F1_life_1" name="btn_true_43005:RESOCCHAZ--5F1_life_1" class="ure_btn" type="submit"> 
 
       <input id="btn_false_43005:RESOCCHAZ--5F1_life_1" name="btn_false_43005:RESOCCHAZ--5F1_life_1" class="ure_btn" type="button" value="no"> 
 
      </div> 
 
     </div> 
 
    </fieldset> 
 
</li>

Answer 2

不幸的是，字段集不能被定義爲flexbox（28078681），所以我使用浮點作爲問題列。希望這可以幫助。

fieldset { 
 
    padding: 0; 
 
    border: none; 
 
} 
 

 
.holder { 
 
    display: flex; 
 
} 
 

 
li { 
 
    list-style: none; 
 
} 
 

 
.col_question, 
 
.col_answer, 
 
.col_select { 
 
    border-style: groove; 
 
} 
 

 
.col_question { 
 
    max-width: 60%; 
 
    float: left; 
 
}

<li id="area--5F43005:RESOCCHAZ--5F1" class="row"> 
 
    <fieldset> 
 
    <div class="col_question"> 
 
     4. As part of your occupation, do you work at etc. ect. 
 
    </div> 
 

 
    <div class="holder"> 
 
     <input type="hidden" name="43005:RESOCCHAZ--5F1_life_1" id="trigger_43005:RESOCCHAZ--5F1_life_1" value="true"> 
 

 
     <div class="col_answer" id="answ_43005:RESOCCHAZ--5F1_life_1"> 
 
     No&nbsp; 
 
     </div> 
 

 
     <div class="col_select"> 
 
     <input id="btn_true_43005:RESOCCHAZ--5F1_life_1" name="btn_true_43005:RESOCCHAZ--5F1_life_1" class="ure_btn" type="submit"> 
 
     <input id="btn_false_43005:RESOCCHAZ--5F1_life_1" name="btn_false_43005:RESOCCHAZ--5F1_life_1" class="ure_btn" type="button" value="no"> 
 
     </div> 
 
    </div> 
 
    </fieldset> 
 
</li>

Answer 3

這裏最大的問題是，字段集已經不能適用於它Flexbox的。如果您可以將字段集更改爲不同的標籤類型，則可以通過flex-grow輕鬆使用flexbox來實現此目的。 現在，你可能有與數字和填充/利潤率玩，但這種方法將工作：

.col_question { 
    display: inline-block; 
    width: 32vw; 
} 

.holder { 
    display: inline-block; 
} 

.col_answer { 
    display: inline-block; 
    width: 32vw; 
} 

.col_select { 
    display: inline-block; 
    width: 32vw; 
} 

Answer 4

最簡單的方法是通過顯示 - 表和表細胞。

JS小提琴：https://jsfiddle.net/Dhruvil21_04/9rzdu1pp/2/

* { 
 
    box-sizing: border-box; 
 
} 
 
li { 
 
    list-style-type: none; 
 
} 
 
.col_question{ 
 
    display: inline-block; 
 
    border-style: groove; 
 
    padding:6px; 
 
    display: table-cell; 
 
    width: 33.33%; 
 
} 
 

 
.col_answer{ 
 
display: inline-block; 
 
border-style: groove; 
 
padding:6px; 
 
} 
 

 
.col_select{ 
 
border-style: groove; 
 
padding:6px; 
 
} 
 

 
fieldset{ 
 
border:none; 
 
-webkit-margin-start: 0px; 
 
-webkit-margin-end: 0px; 
 
-webkit-padding-before: 0px; 
 
-webkit-padding-start: 0px; 
 
-webkit-padding-end:0px; 
 
-webkit-padding-after:0px; 
 
min-width:0px; 
 
display: table; 
 
width: 100%; 
 
} 
 
.holder { 
 
    display: table-cell; 
 
    width: 66.66%; 
 
} 
 
.holder > div { 
 
    width: 50%; 
 
    display: inline-block; 
 
    margin: 0; 
 
    float: left; 
 
}

<li id="area--5F43005:RESOCCHAZ--5F1" class="row"> 
 
    <fieldset> 
 
     <div class="col_question"> 
 
      4. As part of your occupation, do you work at etc. ect. 
 
     </div> 
 

 
     <div class="holder"> 
 
      <input type="hidden" name="43005:RESOCCHAZ--5F1_life_1" id="trigger_43005:RESOCCHAZ--5F1_life_1" value="true"> 
 

 
      <div class="col_answer" id="answ_43005:RESOCCHAZ--5F1_life_1"> 
 
       No&nbsp; 
 
      </div> 
 

 
      <div class="col_select"> 
 
       <input id="btn_true_43005:RESOCCHAZ--5F1_life_1" name="btn_true_43005:RESOCCHAZ--5F1_life_1" class="ure_btn" type="submit"> 
 
       <input id="btn_false_43005:RESOCCHAZ--5F1_life_1" name="btn_false_43005:RESOCCHAZ--5F1_life_1" class="ure_btn" type="button" value="no"> 
 
      </div> 
 
     </div> 
 
    </fieldset> 
 
</li>