总的来说,我对MediaWiki、HTML、CSS和编程都是非常陌生的.我对if语句使用了ParserFunctions扩展,以便在其为空时删除行.当我使用该模板时,对于每删除两行,它会在顶部创建一个空白行.此外,"配偶"缩进的问题也让我很恼火,有什么方法可以改变这一点吗?

All rows All rows All rows Two rows removed 另请参阅以下内容:

{{#css:
  .infobox {
    width: 270px;
    color: #000000;
    line-height: 1.3;
  }
  .infobox td:nth-child(2) {
    text-align: left;
    
  }
  .infobox td:nth-child(1) {
    text-align: left;
    font-weight: bold;
    width: 30%;
    max-width: 100px;
  .infobox tr:first-child {
    display: none;
  }
}}

Html:

<div style="border: 1px solid #aaa; background-color: #F8F9FA; padding: 5px; text-align: center; font-size: 90%; float: right; margin: 0 0 10px 10px;">
{| class="infobox"
| <tr><th style="background-color: #99BADD; font-size: 120%; width: 30%; vertical-align: top;" colspan="2">{{{name}}}</th></tr>
| <tr><td colspan="2" style="text-align:center;"><img src="{{{image}}}" alt="{{{alt}}}" /></td></tr>
| <tr><th colspan="2" style="background-color: #CCBBEE;">{{{title}}}</th></tr>
{{#if: {{{birth|}}}
  | <tr><td>Born</td><td>{{{birth}}}<br>{{{birth-place}}}</td></tr>
}}
{{#if: {{{death|}}}
  | <tr><td>Died</td><td>{{{death}}}<br>{{{death-place}}}</td></tr>
}}
{{#if: {{{house|}}}
  | <tr><td>House</td><td>{{{house}}}</td></tr>
}}
{{#if: {{{spouse|}}}
  | <tr><td>Spouse(s)</td><td>{{{spouse}}}</td></tr>
}}
{{#if: {{{issue|}}}
  | <tr><td>Issue</td><td>{{{issue}}}</td></tr>
}}
{{#if: {{{father|}}}
  | <tr><td>Father</td><td>{{{father}}}</td></tr>
}}
{{#if: {{{mother|}}}
  | <tr><td>Mother</td><td>{{{mother}}}</td></tr>
}}
</div>

我try 了一些css属性,但似乎都不起作用.

推荐答案

这是因为您在{{#if条语句之间放置了Enter.两次回车会被Mediawiki解释为空段落,从而导致表格中出现一些空白区域.

您可以按如下方式进行解析:

  1. 逃离你的进场:
{{#if: FOO|
Bar
}}<!--
-->{{#if: Baz|
Qux
}}<!--
etc -->
  1. 不写入条目:
{{#if: FOO|
Bar
}}<!-- no enter here! -->{{#if: Baz|
Qux
}}<!-- etc -->

除此之外,您还使用了MediaWiki表语法和html表语法的奇怪组合.我建议你把所有东西都写成两者中的一种.根据我的经验,html表格语法更健壮.

<div style="border: 1px solid #aaa; background-color: #F8F9FA; padding: 5px; text-align: center; font-size: 90%; float: right; margin: 0 0 10px 10px;">
<table class="infobox">
<tr><th style="background-color: #99BADD; font-size: 120%; width: 30%; vertical-align: top;" colspan="2">{{{name}}}</th></tr>
<tr><td colspan="2" style="text-align:center;"><img src="{{{image}}}" alt="{{{alt}}}" /></td></tr>
<tr><th colspan="2" style="background-color: #CCBBEE;">{{{title}}}</th></tr><!--
-->{{#if: {{{birth|}}}
|<tr><td>Born</td><td>{{{birth}}}<br>{{{birth-place}}}</td></tr>
}}{{#if: {{{death|}}}
|<tr><td>Died</td><td>{{{death}}}<br>{{{death-place}}}</td></tr>
}}{{#if: {{{house|}}}
  | <tr><td>House</td><td>{{{house}}}</td></tr>
}}{{#if: {{{spouse|}}}
| <tr><td>Spouse(s)</td><td>{{{spouse}}}</td></tr>
}}{{#if: {{{issue|}}}
| <tr><td>Issue</td><td>{{{issue}}}</td></tr>
}}{{#if: {{{father|}}}
| <tr><td>Father</td><td>{{{father}}}</td></tr>
}}{{#if: {{{mother|}}}
| <tr><td>Mother</td><td>{{{mother}}}</td></tr>
}}</table>
</div>

Html相关问答推荐

如何在元素的三条边中间换行边框?

我无法使用背景图像css,因为我在VS代码中将照片放在不同的文件夹中

子元素的单一背景

我的Django应用程序中出现模板语法错误

如何显示自定义按钮以将产品添加到WooCommerce购物车?

如何设计缠绕锚点元素的样式?

为什么带有截断的 contentedible div 在受约束时会在 Chrome 中添加空格

如何在悬停时更改同级元素 CSS

:after 伪元素没有出现,即使它有 content 属性

复制两个

会产生一个空行;复制

元素不会

下划线在 Bootstrap 5 导航链接下无法正常工作

如何使背景 colored颜色 逐渐渐变成另一种 colored颜色 ?

我正在使用 NVDA 并多次读取关闭按钮,但它的读取非常完美

在shiny 的应用程序中使用图标功能时出错

pandas `to_html()` - 如何只使特定的行有边框

高度大于页面高度和页面大于覆盖的 CSS 覆盖

什么没有 margin-right 和 width:100% 溢出子元素到左边?

如何使用 html 和 css 为卡片创建此背景框架

使用 Selenium for Python 在网站上查找类名称中包含换行符的元素

变换元素以适应高度(Angular,SCSS)