为什么跨度会影响同级跨度的垂直定位

Question

为什么跨度会影响同级跨度的垂直定位

在下面的 HTML 页面中，我有一个 div，它包含两个跨度（span1和span2），其中第二个包含一个子跨度span2a. 在span1包含文本，一样的span2a。使用此设置，文本的垂直对齐方式不同，我不知道为什么。

麻烦的是，也有对样式属性span2和span2a。我无法控制这些，因为它们是在运行时由 jQuery 循环插件注入的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title> 
    <style type="text/css">
        body {margin: 0; padding: 0; font-family: arial; color: black;}
        .container { height: 30px; text-align: left; padding: 8px 15px 0 15px; background-color: #fee; border: 1px solid red;}
        .ticker { font-size: 12px; font-weight: bold; padding-top: 4px; float: left;}
        .ticker > span:first-child { background-color: #bfb; }
        .tickerscroll { display: inline-block; background-color: #bbf; }
    </style>
</head>
<body>
    <div class="container">
        <div class="ticker">
            <span class="span1">LABEL: </span>
            <span class="span2 tickerscroll" style="position: relative; width: 480px; height: 15px; overflow-x: hidden; overflow-y: hidden; ">
                <span class="span2a" style="position: absolute; top: 0px; opacity: 1; z-index: 3; left: 0px; ">The value (in a sub-span; note that Label is lower then this text)</span>
            </span>
        </div>
    </div>
    <div class="container">
        <div class="ticker">
            <span class="span1">LABEL: </span>
            <span class="span2 tickerscroll" style="position: relative; width: 480px; height: 15px; ">
                &nbsp;<span class="span2a" style="position: absolute; top: 0px; left: 0px; ">The value (this time, I've added a &amp;nbsp; outside this inner span)</span>
            </span>
        </div>
    </div>
    <div class="container">
        <div class="ticker">
            <span class="span1">LABEL: </span>
            <span class="span2 tickerscroll" style="position: relative; width: 480px; height: 15px; ">
                The value (this time, the inner span span2a is not present at all)
            </span>
        </div>
    </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

正如您从我的代码中看到的，我添加了两个“修复”问题的变体：

添加一些文字（任何文字，在我的情况我已经添加了非换空间）内span2之外span2a。
完全删除子跨度，并将文本放在第二个顶级跨度内。但是，这对我来说不是一个选择，因为需要 span2a 才能使 jQuery 循环工作。

有没有办法让两段文本对齐而不必人为地抛出进span2? 该解决方案不能更改任何 span 元素的样式属性，但可以根据需要添加 CSS 类。

Answer 1

And*_*ich 5

垂直对齐是不同的，因为span标签自然是内联元素，在您的情况下，您正在span2通过使用您的overflow:hidden属性创建一个块级元素来修改您的类的行为。您可以通过将您的span1类也定义为块级元素来修复它display:inline-block，只需将其与vertical-align:top属性的顶部对齐或将其浮动到左侧：

.span1 {
    display: inline-block;
    *display:inline; /* ie 7 fix */
    vertical-align: top;
}

Run Code Online (Sandbox Code Playgroud)

或者

.span1 {
    float:left;
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，7 月前
查看次数：	2151 次
最近记录：	13 年，7 月前