Home / Questions / 1509
Accepted
Rubén
Asked: 2020-12-22 21:56:15 +0800 CST 2020-12-22 21:56:15 +0800 CST

如何使用用户样式修改 Google 表单的显示

  • 772

问

有没有办法使用“userstyles”（ ）修改新谷歌表单user styles的元素布局？

语境

新的 Google 表单在不同的行中显示标题、建议文本和答案字段，这导致表单占用了大量空间。

示例：展示了一个表单示例，其中包括 Google 表单的每个元素的示例。

以前的调查

“用户样式”的使用是一种自定义在其他人开发的网页上呈现信息的方式的技术。

可以estilos de usuario使用Chrome等浏览器的开发者工具进行申请。这得益于 Chrome 和 Firefox 等浏览器的扩展。这种技术利用了“样式级联表”（cascading style sheets/ CSS）。

执行了互联网搜索，但没有找到专门解释使用CSS修改 Google 表单显示的页面。

尝试

解析了上面的谷歌表单源代码。据观察，元素标记有DIV嵌套标签和类属性。

尝试使用 , 转换为table表格table-row table-cell。它适用于 question 类型的元素，而不适用于títuloy类型的元素sección，因为它们跨越了表单的宽度，但CSS没有合并单元格的属性。

发现 Q&A 和文章建议使用诸如作为解决方案之类的属性table-caption，table-header但这些都被丢弃了，因为很难将标题和节标题放在正确的位置。还发现了一个建议使用标签的问答，span但这意味着使用脚本。

由于上述原因，除了几个问答之外，得出的结论是，使用表格的属性并不完全方便，特别是因为CSS它不包括直接组合表格单元格的方法。

参考

css

1 Answers

  1. Best Answer

    简短的回答

    与其使用转换为表格的方法，不如使用float和属性将一些元素从正常的内容流中取出clear。节标题、页眉和网格类型问题除外。

    代码

    紧凑型（等宽）

    它们被分配了 50% 的宽度。在 Chrome OS 版本 48.0.2564.48 beta 上测试并使用Stylish扩展。

    .freebirdFormviewerViewItemsItemItem,
.freebirdFormviewerViewItemsGridContainer,
.freebirdFormviewerViewNavigationNavControls {
    clear:both;
}
.freebirdFormviewerViewItemsItemItemheader,
.freebirdFormviewerViewItemsItemItemheader 
+ div:not(.freebirdFormviewerViewItemsGridContainer) {
    float:left;
    width:50%;
}

    不等宽版

    .freebirdFormviewerViewItemsItemItem,
.freebirdFormviewerViewItemsGridContainer,
.freebirdFormviewerViewNavigationNavControls {
    clear:both;
}
.freebirdFormviewerViewItemsItemItemheader
    float:left;
    width:30%;
.freebirdFormviewerViewItemsItemItemheader 
+ div:not(.freebirdFormviewerViewItemsGridContainer) {
    float:left;
    width:70%;
}

    正则表达式（正则表达式）

    分隔您应用上述用户样式的页面

    表格主页

    \bhttps://docs.google.com/forms/\S+viewform\b

    页siguiente

    \bhttps://docs.google.com/forms/\S+formResponse\b

    成绩

    • 原始宽度限制为 600 像素。
    • 具有段落类型响应的问题要求宽度大于上述宽度的 50%。使用float它的一个优点是它不会溢出定义的宽度，而是放在下一行。

    参考

    西班牙语的 Mozilla 开发者网络 (MDN)

    浏览器扩展

    • 1