gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 15:20:23 25 4
gpt4 key购买 nike

在下面的 HTML 页面中,我有一个 div,它包含两个跨度(span1span2),第二个包含一个子跨度,span2aspan1 包含文本,span2a 也是如此。使用此设置,文本的垂直对齐方式不同,我无法弄清楚原因。

使事情复杂化的是,span2span2a 上有样式属性。我无法控制这些,因为它们是在运行时由 jQuery 循环插件注入(inject)的。

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

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

  1. span2a 之外的 span2 内添加一些文本(任何文本,在我的例子中我添加了一个不间断的空格)。
  2. 完全删除子跨度,并将文本放在第二个顶级跨度内。但是,这对我来说不是一个选项,因为 span2a 的存在是使 jQuery 循环工作所必需的。

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

最佳答案

垂直对齐是不同的,因为 span 标签自然是内联元素,在您的情况下,您通过创建 block 级元素来修改 span2 类的行为你的 overflow:hidden 属性。您可以通过将 span1 类也定义为带有 display:inline-block 的 block 级元素并简单地将其与 vertical- 对齐到顶部来修复它align:top 属性或将其 float 到左侧:

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

或者

.span1 {
float:left;
}

关于html - 为什么跨度会影响兄弟跨度的垂直定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9979396/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com