javascript - MediaWiki 如何让 [Collapse] 链接不随文本移动位置?

标签 javascript html css mediawiki mediawiki-extensions

当您点击 [Expand] 时,[Collapse] 链接会出现,但随着文本的长度向右移动。
我不希望 [Collapse] 链接向右移动,我希望它显示为 put。

如何让 [Collapse] 链接不随文本移动位置?

{| class="mw-collapsible mw-collapsed" style="text-align:left;"<br>
! '''Header'''<br>
|-<br>
|<br>
Line1: A long line of text that is used to test the position of the [Collapse] link in my document.<br>
Line2: A long line of text that is used to test the position of the [Collapse] link in my document.<br>
Line3: A long line of text that is used to test the position of the [Collapse] link in my document.<br>
Line4: A long line of text that is used to test the position of the [Collapse] link in my document.<br>
Line5: A long line of text that is used to test the position of the [Collapse] link in my document.<br>
|}


最佳答案

要阻止展开/折叠链接移动,您可以在表格上设置宽度,例如:

{| class="mw-collapsible mw-collapsed"
! style="width: 50em" | '''Header'''
|-
| Line1: A long line of text that is used to test the position of the [Collapse] link in my document.<br>
  Line2: A long line of text that is used to test the position of the [Collapse] link in my document.<br>
  Line3: A long line of text that is used to test the position of the [Collapse] link in my document.<br>
  Line4: A long line of text that is used to test the position of the [Collapse] link in my document.<br>
  Line5: A long line of text that is used to test the position of the [Collapse] link in my document.<br>
|}

(我删除了额外的 <br> 元素和 align: left)

不幸的是,由于“展开”和“折叠”之间的宽度差异,表头仍会略微移动位置。如果您想停止该移动,您可以向 Mediawiki:Common.css 添加一条语句,即 wiki 的全局样式表,以指定切换的宽度。检查源代码,切换位于类 .mw-collapsible-toggle 的元素中,因此您可以使用如下语句在 Mediawiki:Common.css 中指定宽度:

.mw-collapsible-toggle { width: 5em; }

您还可以将页眉左对齐(就像您在原始示例中所做的那样)而不是居中对齐。

关于javascript - MediaWiki 如何让 [Collapse] 链接不随文本移动位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22546710/

相关文章:

javascript if 语句不起作用

javascript - 如何使用 Javascript 在 Canvas 上绘制 SVG?

html - Bootstrap 带间距的固定导航栏

css - 第 n 个和第 m 个兄弟元素的选择器?

javascript - jQuery - 更改输入值

javascript - React 路由到具有不同 URL 的同一组件

javascript - 允许点击但禁用链接

javascript - 如何获取使用地理定位创建的动态内容并在另一个 div 中使用它?

javascript - 如何动态删除javascript中的元素?

python - 使用pdfkit python在第一页上使用不同的边距