小编Net*_*ave的帖子
由于空<span>,html/css对齐问题.是什么让我的内容下移？
我在html/css中有对齐问题.我简化了我的问题:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
span { display: inline-block; height: 50px; }
span.text { background-color: Yellow;}
span.left, span.right { background-color: Red; width: 20px;}
</style>
</head>
<body>
<span class="left">x</span>
<span class="text">Text comes here</span>
<span class="right">x</span>
</body>
</html>
浏览器中的输出符合预期:
但是,span.left和span.right不应包含任何内容.它们仅用于布局目的.但是,当我删除这两个跨度的内容("x")时:
<span class="left"></span>
<span class="text">Text comes here</span>
<span class="right"></span>
输出更改为:
它为什么这样做？我该怎么做才能解决这个问题？
5
推荐指数
推荐指数
1
解决办法
解决办法
2219
查看次数
查看次数
CSS的差异<span> </ span>与<span />？
仍在努力让新网站的导航控制按照我想要的方式运行.
我将问题简化为这段代码:
<!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> </ span>,它也会像这样生成<span />:
<span class="block" /><span>A B C D</span>
<span class="block" /><span>E F G H</span>
此代码呈现为:
它为什么这样做？
<span> </ span>和<span />之间有什么区别？
PS:在真实的情况下,XSLT使用菜单项呈现为ul.块跨度用于布局目的(背景图像); 这就是为什么它有尺寸而没有内容.
2
推荐指数
推荐指数
1
解决办法
解决办法
336
查看次数
查看次数