Question

仍然试图以我想要的方式运行新网站的导航控制。

我将问题简化为这段代码：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
    <style>
        span { display: inline-block; height: 50px; vertical-align: top; background-color: Yellow; } 
        span.block { background-color: Red; width: 15px; }
    </style> 
</head> 
<body>
    <span class="block"></span><span>A B C D</span>
    <span class="block"></span><span>E F G H</span>
</body> 
</html>

此代码呈现为：

enter image description here

但是，跨度是从Umbraco的XSLT生成的。即使源状态＆lt; span＆gt;＆lt; / span＆gt;它生成＆lt; span /＆gt;像这样：

<span class="block" /><span>A B C D</span>
<span class="block" /><span>E F G H</span>

此代码呈现为：

enter image description here

为什么要这样做？

＆lt; span＆gt;＆lt; / span＆gt;之间的区别是什么？和＆lt; span /＆gt;？

PS：在真实的情况下，XSLT使用菜单项呈现为ul。块跨度用于布局目的（背景图像）;这就是为什么它有尺寸但没有内容。

Answer 1

HTML中不存在自闭范围标记，浏览器会将其解释为无效的HTML并猜测您的意思。

在这种情况下，可能会对此进行处理：

<span class="block" /><span>A B C D</span>
<span class="block" /><span>E F G H</span>

为：

<span class="block"><span>A B C D</span>
<span class="block"><span>E F G H</span></span></span>

您可以通过右键单击测试页面，然后选择Inspect Element以使用Web工具来确认，或者Firebug（如果已安装）。 inspector会在浏览器解释时显示HTML树。

Answer 2

我无法理解为什么你需要使用<span>块进行布局？为什么不将一个类添加到<span>（或者可能更适合<div>）并应用左填充和背景图像？

.my-class {
    padding-left: 15px;
    background: url(images/my-image.png) no-repeat 0 50%;
}

差异<span> </span>与CSS的<span>相比？</span>

2 个答案: