Question

我有一个客户端表单，其中包含从iframe提供的HTML - 我无法编辑它。我唯一能做的就是应用CSS编辑。

我正在尝试应用一个简单的调整，它会在表单中堆叠<td>，所以

1. What is your age?

成为

1.
What is your age?

如果您右键单击第一个问题并Inspect Element，您将看到我可以使用的相当有趣的DOM结构。这个例子看起来像这样：

<div id="Age" class="questionlabel">
    <table border="0" cellpadding="0" cellspacing="0">   
        <tbody>
            <tr>
                <td>
                    <span class="questionnumber_questionlabel">1. </span>
                </td>
                <td>
                    <label class="required">What is your age?</label>
                </td>
            </tr>
        </tbody>
    </table>
</div>

当我检查<td>并添加display:table-row;时，它完全忽略了我。这是在Chrome中 - 我可以复制这个DOM和get the CSS to do what I want in jsfiddle所以我认为在某处我看不到重置。我甚至试过display:table-row !important;无济于事。我可以申请border:2px solid blue;没问题。我可以申请display:none;没问题。

这里有什么想法可以防止这个简单的CSS参数工作？

要重新迭代我唯一能做的就是应用CSS - 没有JavaScript而且没有HTML编辑。基本上我将url中的CSS文件传递给iFrame。这就是我得到的全部。谢谢！

编辑：我道歉我必须删除实际网站上示例表单的链接。

Answer 1

编辑 - 必须删除屏幕截图，但解决方案仍然有效。

使用Firebug将此代码添加到 form-css.css 。开始或结束，没关系：

table#form_table div.questionlabel td {display: table-row !important;}
.questionnumber_questionlabel {margin: inherit!important;}

（注意：我将该边距重置为旧边距（-10px）导致难看的重叠。）

显示：表格行无效

1 个答案: