网格项内容的基线是如何确定的?
[英] How is the baseline determined for the content of grid items?
本文介绍了网格项内容的基线是如何确定的?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这真的让我很困惑.请参阅下面的两个演示:
<div style="display: grid;align-items:baseline; gap: 10px; grid-template-columns: 160px minmax(100px, 200px) 自动;"><div style="grid-column-start: 1;"><跨度>第一行名称</span>
<div style="grid-column: 2/4;"><div><button style="height:30px">第一行描述
<div style="grid-column-start: 1;"><跨度>第一行描述</span>
<div style="grid-column: 2/4;"><div><span style="display:inline-block;">Lorem ipsum dolor 坐 amet，consectetuer adipiscing 精英.Aenean commodo ligula eget dolor.Aenean m Lorem ipsum dolor 坐 amet，consectetuer adipiscing 精英.Aenean commodo ligula eget dolor.Aenean m Lorem ipsum dolor 坐 amet，consectetuer adipiscing 精英.Aenean commodo ligula eget dolor.Aenean m Lorem ipsum dolor 坐 amet，consectetuer adipiscing 精英.Aenean commodo ligula eget dolor.埃涅阿米</span>
https://jsfiddle.net/8m2cujvg/
<div style="display: grid;align-items:baseline; gap: 10px; grid-template-columns: 160px minmax(100px, 200px) 自动;"><div style="grid-column-start: 1;"><跨度>第一行名称</span>
<div style="grid-column: 2/4;"><div><button style="height:30px">第一行描述
<div style="grid-column-start: 1;"><跨度>第一行描述</span>
<div style="grid-column: 2/4;"><div><跨度>Lorem ipsum dolor 坐 amet，consectetuer adipiscing 精英.Aenean commodo ligula eget dolor.Aenean m Lorem ipsum dolor 坐 amet，consectetuer adipiscing 精英.Aenean commodo ligula eget dolor.Aenean m Lorem ipsum dolor 坐 amet，consectetuer adipiscing 精英.Aenean commodo ligula eget dolor.Aenean m Lorem ipsum dolor 坐 amet，consectetuer adipiscing 精英.Aenean commodo ligula eget dolor.埃涅阿米</span>
https://jsfiddle.net/8m2cujvg/1/
您可以看到第一个文本对齐有问题.我尝试浏览文档:https://drafts.csswg.org/css-align/#alignment-baseline 但很难看出块和内联块之间的任何区别.
解决方案
我很难看出块和内联块之间的任何区别."
区别在于内联级元素激活了 vertical-align 属性.
因此，在带有 display: inline-block 的 span 中，默认情况下会应用 vertical-align:baseline 规则.这会将跨度的内容设置为父级的基线.
vertical-align 属性对块级元素没有影响.
<块引用>vertical-align CSS 属性设置内联的垂直对齐方式，内联块或表格单元格框.~ MDN
解决方案是覆盖默认值.将此添加到您的代码中:
span {显示:内联块；垂直对齐:顶部；/* 新的 */}
<div style="display: grid;align-items:baseline; gap: 10px; grid-template-columns: 160px minmax(100px, 200px) 自动;"><div style="grid-column-start: 1;"><跨度>第一行名称</span>
<div style="grid-column: 2/4;"><div><button style="height:30px">第一行描述
<div style="grid-column-start: 1;"><跨度>第一行描述</span>
<div style="grid-column: 2/4;"><div><span style="display:inline-block; vertical-align: top;">Lorem ipsum dolor 坐 amet，consectetuer adipiscing 精英.Aenean commodo ligula eget dolor.Aenean m Lorem ipsum dolor 坐 amet，consectetuer adipiscing 精英.Aenean commodo ligula eget dolor.Aenean m Lorem ipsum dolor 坐 amet，consectetuer adipiscing 精英.Aenean commodo ligula eget dolor.Aenean m Lorem ipsum dolor 坐 amet，consectetuer adipiscing 精英.Aenean commodo ligula eget dolor.埃涅阿米</span>
This has really got me confused. See the two demos below:
<div style="display: grid; align-items: baseline; gap: 10px; grid-template-columns: 160px minmax(100px, 200px) auto;">
<div style="grid-column-start: 1;">
<span>
First row name
</span>
</div>
<div style="grid-column: 2 / 4;">
<div>
<button style="height:30px">
First row description
</button>
</div>
</div>
<div style="grid-column-start: 1;">
<span>
First row description
</span>
</div>
<div style="grid-column: 2 / 4;">
<div>
<span style="display:inline-block;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m
</span>
</div>
</div>
</div>
https://jsfiddle.net/8m2cujvg/
<div style="display: grid; align-items: baseline; gap: 10px; grid-template-columns: 160px minmax(100px, 200px) auto;">
<div style="grid-column-start: 1;">
<span>
First row name
</span>
</div>
<div style="grid-column: 2 / 4;">
<div>
<button style="height:30px">
First row description
</button>
</div>
</div>
<div style="grid-column-start: 1;">
<span>
First row description
</span>
</div>
<div style="grid-column: 2 / 4;">
<div>
<span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m
</span>
</div>
</div>
</div>
https://jsfiddle.net/8m2cujvg/1/
You can see that the first one has an issue with text alignment. I tried looking through the docs: https://drafts.csswg.org/css-align/#alignment-baseline but struggle to see any differentiation between block and inline-block.
解决方案
"I struggle to see any differentiation between block and inline-block."
The difference is that inline level elements activate the vertical-align property.
So in your span with display: inline-block, a vertical-align: baseline rule is applied by default. This sets the content of the span to the baseline of the parent.
The vertical-align property has no effect on block level elements.
The vertical-align CSS property sets vertical alignment of an inline,
inline-block or table-cell box. ~ MDN
The solution is to override the default. Add this to your code:
span {
display: inline-block;
vertical-align: top; /* new */
}
<div style="display: grid; align-items: baseline; gap: 10px; grid-template-columns: 160px minmax(100px, 200px) auto;">
<div style="grid-column-start: 1;">
<span>
First row name
</span>
</div>
<div style="grid-column: 2 / 4;">
<div>
<button style="height:30px">
First row description
</button>
</div>
</div>
<div style="grid-column-start: 1;">
<span>
First row description
</span>
</div>
<div style="grid-column: 2 / 4;">
<div>
<span style="display:inline-block; vertical-align: top;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m
</span>
</div>
</div>
</div>
这篇关于网格项内容的基线是如何确定的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
