个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我在span里面放了一个span元素，然后设置vertical-align: 20px用于外跨和 vertical-align: top对于内跨。 HTML 和 CSS 代码在这里。
codepen
.mid {
vertical-align: 20px;
outline: 1px solid;
}
.right {
vertical-align: top;
outline: 1px solid;
}
.se {
vertical-align: top;
}<html>
<body>
<p class="out">A<span class="mid">B<span class="right">C</span>D</span><span class="se">E</span></p>
</body>
</html>
最佳答案
如果我们关注 the specification描述我们可以阅读的行框:
As described in the section on inline formatting contexts, user agents flow inline-level boxes into a vertical stack of line boxes. The height of a line box is determined as follows:
- The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their 'line-height'.
- The inline-level boxes are aligned vertically according to their 'vertical-align' property. In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height.
- The line box height is the distance between the uppermost box top and the lowermost box bottom. (This includes the strut, as explained under 'line-height' below.)
.mid {
vertical-align: 20px;
outline: 1px solid;
}
.right {
vertical-align: top;
outline: 1px solid;
}
.se {
vertical-align: top;
}
p {
border:2px solid red;
}<html>
<body>
<p class="out">A<span class="mid">B<span class="right">C</span>D</span><span class="se">E</span></p>
</body>
</html>vertical-align:-20px，另一个有趣的结果
.mid {
vertical-align: -20px;
outline: 1px solid;
}
.right {
vertical-align: top;
outline: 1px solid;
}
.se {
vertical-align: top;
}
p {
border:2px solid red;
}<html>
<body>
<p class="out">A<span class="mid">B<span class="right">C</span>D</span><span class="se">E</span></p>
</body>
</html>p 的顶部这是逻辑结果。 Chrome 将再次以不同的方式做事，我认为这也是一个错误。
mid element inline-block 你将有一个一致的行为，因为对齐更容易，浏览器和 C 现在都会考虑
mid 中的行框并将永远坚持到顶峰
.mid {
vertical-align: -20px;
outline: 1px solid;
display:inline-block;
}
.right {
vertical-align: top;
outline: 1px solid;
}
.se {
vertical-align: top;
}
p {
border:2px solid red;
}<p class="out">A<span class="mid">B<span class="right">C</span>D</span><span class="se">E</span></p>
<p class="out">A<span class="mid" style="vertical-align: 20px">B<span class="right">C</span>D</span><span class="se">E</span></p>.mid {
outline: 1px solid;
}
.right {
vertical-align: top;
outline: 1px solid;
}
.se {
vertical-align: 40px;
}
p {
border: 2px solid red;
display: inline-block;
}<p class="out">A<span class="mid" style="vertical-align:baseline">B<span class="right">C</span>D</span><span class="se">E</span></p>
<p class="out">A<span class="mid" style="vertical-align: 20px;">B<span class="right">C</span>D</span><span class="se">E</span></p>
<p class="out">A<span class="mid" style="vertical-align: 40px">B<span class="right">C</span>D</span><span class="se">E</span></p>
<p class="out">A<span class="mid" style="vertical-align:-20px">B<span class="right">C</span>D</span><span class="se">E</span></p>mid )然后对齐中间元素，这会产生奇怪的结果。 C 偏移设置为
vertical-align 的像素值的
.mid元素从顶部。
关于css - 嵌套的内联元素 'vertical-align' 在 Chrome 和 Firefox 上的行为不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65966021/
27
4
0
我将 bxSlider 用于轮播。它提供水平和垂直模式，这很好。 唯一的问题是在垂直显示时，箭头仍然保持在水平位置。 HTML 代码: JS $('.sliderLo
我有一个包含数百个 STL 网格的文件夹，我想使用 flatten 命令将它们合并到 meshlab 中。 我使用的是常规 GUI，当我打开文件并选择所有这些 STL 文件时，如果我想“统一重复顶点”
我有 2 个表，其中包含一组数据，如下所示，我想获得结果，该结果将在字段 balance 中进行计算: 我卡在了 balance 字段，如何让 balance 运行？ tblIn in_date
我想打印所有顶点及其相邻顶点。我在网上找到了一些关于如何做到这一点的例子，但它对我不起作用。我收到错误，++ 运算符不能用于 ai。另外我认为它需要是 vertex_idMap[*ai] 而不是 ve
运行 ./gradlew lint 向我报告一个令人困惑的错误: 39: Must be one of: RecyclerView.HORIZONTAL, RecyclerView.VERTICAL
你好，我无法弄清楚为什么传递 GLfloat 位置数组 (xyz) 的第一个元素突然为缓冲区提供该数组的所有元素。 glBufferData(GL_ARRAY_BUFFER, sizeof(Verte
抱歉打死马，但我无法理解为什么下面的方法不起作用。 设置line-height: 50px 设置vertical-align: top 据我了解，这应该使行框高 50 像素，然后 vertical-a
所以，我正在查看 Bootstrap 文档以寻找解决这个问题的方法，但没有找到任何东西。有没有办法，使用bootstrap组件，一个接一个垂直显示按钮组？ 这是我目前所拥有的: but
目标:我需要通过移动现有顶点而不是添加新顶点来编辑矢量图层，因为我有一个表格，其中显示每个顶点的坐标。当我移动一个顶点时，我必须更新表格。 调查:我查看了 openlayers 4.6.5 的文档 I
这两个属性是一样的还是有不同的用法？vertical-align:top 和 vertical-align:text-top 最佳答案 区别可以通过line-height属性来解释。 MDN Sour
我有一些关于视觉内容的问题，可以在附件(在 Firefox 中使用 CTRL-+ 查看放大的视觉内容在左侧生成它的代码)。让我们命名视觉从上到下用数字 1、2、3、4、5 和 6 列出的内容。我对这种
XCode 建议我在创建的动态大小单元格中为约束设置垂直压缩和拥抱优先级。虽然单元格总是正确显示，但错误仍然存在，所以这不是问题，但我需要删除错误才能将更新提交到 App Store。 我在多标签
显示部分幻灯片的垂直 Flexslider。幻灯片从上到下剪切。这是不同图像尺寸的问题。 这是代码: $(window).load(function(){ $('.flexslider').f
我正在尝试 CSS multi-columns spec 并想出了 column-axis。但我不明白它的作用是什么？看起来 column-axis: horizontal; 是 regular
在思考这个问题时，我一直在挠头。我有 3 个 div。顶部和底部的 div 有一个最小高度，中间的 div 有未知的高度(按内容扩展)但应该在页面中居中。顶部和底部的 div 应填充剩余的顶部和底部空
我有一个包含文本的 div，line-height 大于文本的高度。这意味着每行文本的顶部和下方都有空间。 右侧有一个垂直边框，我希望其顶部与文本顶部对齐。我需要以某种方式将文本与其行的顶部对齐。 这
嗯，我得到了这个结构: #parent{ max-width: 800px; height: auto; margin: auto;
我这里有两个可能很简单的 CSS 问题: http://web288.merkur.ibone.ch/klingler/ 如何让页脚中的 © Klingler Fahrzeugtechnik AG 2
假设我们有一组 JSON 格式的人。每个实体大约有 100 个属性。使用 ng-repeat 的标准方法: ... Attribute1 Attribute2 ... Attribu
我正在尝试用点语言绘制一个稀疏矩阵，实际上节点连接是可以的，但问题是这些节点的垂直对齐，我尝试使用 pos 并放置具有 x 和 y 值的节点，但只是没有t 工作(我认为是因为默认布局)。如果你能帮助我
我是一名优秀的程序员,十分优秀！