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>

从我的代码中可以看出，我添加了两个“修复”问题的变体：

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

有没有办法让这两段文字对齐，而不必人为地抛出一个＆amp; nbsp;进入span2？该解决方案无法更改任何span元素的样式属性，但可以根据需要添加CSS类。

Answer 1

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

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

或者

.span1 {
    float:left;
}

Answer 2

    .ticker span {vertical-align:top}

回答你的问题：Span 2是空的，因此没有任何东西可以与span 1对齐。跨度2是绝对定位的跨度2a的包含块，并且该2a从顶部开始：0; left：跨度为0的0，因此未对齐。

第二种情况：如果span 2不为空，则它将与span 1和a.p.进行基线对齐。 span 2a按预期对齐。

案例3与案例2相同。

Answer 3

我会试试这个：

让所有这3个跨度具有相同的行高和相同的垂直对齐

示例：

.span1, .span2, .span2a
{
    line-height: 20px;
    vertical-align: middle;
}

为什么跨度会影响兄弟跨度的垂直定位

3 个答案: