Question

我正在实现一个无序列表（<ul><li>...</li></ul>），其中显示一个链接（<a>...</a>）。在此链接标记中，除标题文本外，我必须有条件地 *显示图像和短文本。

“完整”输出类似于以下内容：

<ul>
  <li>
    +------------------------+
    | +---+  Title           |
    | |   |                  |
    | +---+  Some short text |
    +------------------------+
  </li>
</ul>

但是，由于上述输出是有条件构建的，因此可能不显示图像或短文本。所以......

...如果图像不存在但短文本是，则输出应该类似

 +------------------------+
 | Title                  |
 |                        |
 | Some short text        |
 +------------------------+

...如果短文本不存在但图像是，那么输出应该是

 +------------------------+
 | +---+  Title           |
 | |   |                  |
 | +---+                  |
 +------------------------+

...如果图像和短文本都不存在，则输出应该类似于

 +------------------------+
 | Title                  |
 +------------------------+

我想在HTML-CSS标签属性上“播放”，而不是“直接”在代码“后面”/“生成”输出上。我该怎么做？< / p>

注意我：jsfiddle.net/zF5Cw/2每个方案的“基本”结构。

Note II ：例如，我遇到了问题：

在图片不存在时正确输出height li个标签：视觉上，每个li标签（以及相关图片）几乎都被前一个标签覆盖; < / LI>
在图像存在且不存在时正确输出“{1}”的“标题”和“某些短文本”;
...

*在幕后我有一个JavaScript代码，它有条件地将HTML添加到输出代码中：

padding-left

Answer 1

此示例涵盖您描述的所有四种方案。现场演示：http://jsfiddle.net/zF5Cw/3/

li {
    padding: 10px;
    border: 1px solid #000;
    margin: 10px;
    overflow: auto;
    width: 300px;
}
img,span{float: left;}
img{margin-right: 10px;}
span{width: 250px;}

Answer 2

CSS不包含可以更改标记的条件逻辑。您需要使用JavaScript来执行此操作。

如何使用HTML-CSS有条件地输出数据？

2 个答案: