由于空<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>
输出更改为:
它为什么这样做？我该怎么做才能解决这个问题？
垂直对齐是有问题的，因为它被设置为默认的基线。只需将其更改为顶部：
span { display: inline-block; height: 50px;vertical-align:top; }
| 归档时间： |
|
| 查看次数： |
2219 次 |
| 最近记录： |