文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS的与的区别？

问CSS的与的区别？
EN

Stack Overflow用户

提问于 2012-02-08 06:51:14

回答 2查看 352关注 0票数 2

仍然试图让一个新网站的导航控制以我想要的方式工作。

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

<!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>

此代码呈现为：

但是，跨度是从Umbraco中的XSLT生成的。即使源代码声明它是这样生成的：

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

此代码呈现为：

它为什么要这么做？

和之间有什么区别？

PS:在实际情况中，XSLT呈现给一个带有菜单项的ul。块跨度用于布局目的(背景图像)；这就是为什么它有尺寸但没有内容的原因。

css

web

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-02-08 06:56:01

HTML中不存在自结束span标记，浏览器会将其解释为无效的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 (如果您已经安装了web工具)来确认这一点。inspector将向您显示浏览器解释的HTML树。

票数 8

Stack Overflow用户

发布于 2012-02-08 10:07:44

我不明白为什么需要使用块进行布局？为什么不向中添加一个类(或者更确切地说，是一个<div>)，并应用左填充和背景图像呢？

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/9185255

复制

相似问题

问CSS的<span></span>与<span/>的区别？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS的<span></span>与<span/>的区别？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS的<span></span>与<span/>的区别？
EN