使用CSS或JavaScript将表行水平对齐

Question

我在创建调查问卷时会受公司CRM的困扰。 我可以自定义调查的JavaScript和CSS，但不能自定义调查显示的垃圾HTML代码。

我正在尝试为范围内列出的调查问题寻求答案。

例：

但是我似乎无法针对答案来应用display：inline属性或float：left属性。

请在下面查看我无法编辑的HTML代码。

<div class="QuestionContainer"
    id="cont_id_f_6b97f5812768e81180f1005056a85b23" questionIndex="12">
    <table cellpadding="0" cellspacing="0">
        <tr style="font-family:Verdana; font-size:13px; color:#000000;">
            <td class="alignTop"><input
                    id="multioption0_6b97f5812768e81180f1005056a85b23"
                    name="multioption0_6b97f5812768e81180f1005056a85b23"
                    type="radio"
                    value="1 - Not at all satisfied"
                    onclick="ShowOneRadio(this);" />
            </td>
            <td class="alignTop">1 - Not at all satisfied</td>
        </tr>
        <tr style="font-family:Verdana; font-size:13px; color:#000000;">
            <td class="alignTop"><input
                    id="multioption1_6b97f5812768e81180f1005056a85b23"
                    name="multioption1_6b97f5812768e81180f1005056a85b23"
                    type="radio"
                    value="2 - Somewhat satisfied" onclick="ShowOneRadio(this);"
                    />
            </td>
            <td class="alignTop">2 - Somewhat satisfied</td>
        </tr>
    </table>
</div>

Answer 1

.QuestionContainer tr {
    float:left;
}

可能还需要添加一个边距，例如margin：10px左右。

Answer 2

Flex box很棒，我建议您看一下它的api

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

如果您有权更改HTML，那么您想要使用的标记将非常冗长。

请让我知道，如果你有任何问题

 .QuestionContainer { width: 100%; } .QuestionContainer tbody { display: flex; flex-direction: row; } tr { padding: 10px; } tr:nth-of-type(odd) { background: #ccc; } 

 <div class="QuestionContainer" id="cont_id_f_6b97f5812768e81180f1005056a85b23" questionIndex="12"> <table cellpadding="0" cellspacing="0"> <tr> <td class="alignTop"> <input type="radio" value="1 - Not at all satisfied" onclick="ShowOneRadio(this);" /> </td> <td class="alignTop">1 - Not at all satisfied</td> </tr> <tr> <td class="alignTop"><input type="radio" value="2 - Somewhat satisfied" onclick="ShowOneRadio(this);" /> </td> <td class="alignTop">2 - Somewhat satisfied</td> </tr> <tr> <td class="alignTop"> <input type="radio" value="1 - Not at all satisfied" onclick="ShowOneRadio(this);" /> </td> <td class="alignTop">3 - Not at all satisfied</td> </tr> <tr> <td class="alignTop"> <input type="radio" value="2 - Somewhat satisfied" onclick="ShowOneRadio(this);" /> </td> <td class="alignTop">4 - Somewhat satisfied</td> </tr> </table> </div>