[英]Horizontal alignment of table rows with CSS or JavaScript
我在創建調查問卷時會受公司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>
.QuestionContainer tr {
float:left;
}
可能還需要添加一個邊距,例如margin:10px左右。
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.