html - 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 个元素的宽度相同并并排放置，以节省顶部/底部的空间。

无论问题/文本的长度如何，这 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 或 container 元素是否需要添加 CSS 元素。

Answer 1

老派的解决方案是使用 float:left;width:33.33% 也使用 box-sizing:border-box 将边框合并到元素的宽度内

请参阅下面的片段和/或> fiddle

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