CSS对齐3个HTML元素，没有访问HTML

不幸的是我只需要查看的HTML的能力，但我能够编辑CSSCSS对齐3个HTML元素，没有访问HTML

有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元素的元素。

来源

2017-06-13 Kevin

也许你可以提供一个工作中的堆叠片段而不是一个形象？ – domsson

查看[flexbox]（https://css-tricks.com/snippets/css/a-guide-to-flexbox/），特别是'flex-direction：horizontal'部分。 – marcellothearcane

也需要原始选择器，而不仅仅是前缀选择器 - 您需要将'padding-after'和'-webkit-padding-after'放在一起。你可以用'padding：右上角的左下角;'连接边距和填充。请参阅[this]（https://www.w3schools.com/css/css_margin.asp#div-gpt-ad-1493883843099-0）以获取更多信息... – marcellothearcane

旧校园的解决办法是使用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>

来源

2017-06-13 13:56:27

不幸的是，字段集不能被定义为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>

来源

2017-06-13 14:10:20 Gerard

这里最大的问题是，字段集已经不能适用于它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; 
}

来源

2017-06-13 14:22:40 crestinglight

最简单的方法是通过显示 - 表和表细胞。

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>

来源

2017-06-13 14:36:11

CSS对齐3个HTML元素，没有访问HTML

回答

相关问题