[英]Inline-Flex messes with vertical align
Having an inline
item next to an inline-flex
with a nested flex
box messes with the vertical alignment (it ignores the top margin), one solution I found was to put a ::before
in the inline-flex
item, but I'm not really sure why this fixes it. 有一个
inline
项目旁的inline-flex
与嵌套flex
盒混乱与垂直对齐(它忽略上边距),一个解决方案,我发现是把一个::before
在inline-flex
项目,但我不太确定为什么可以解决此问题。
The first one ignores the top margin on the label, the top margin works on the second one, because of the ::before
. 第一个忽略标签上的上边距,第二个上边距有效,因为
::before
。
label { margin: 20px 5px 0 0; } .input-container { display: inline-flex; } .with-before::before { content: ''; } .buttons { display: flex; flex-direction: column; }
<div> <label>Top margin ignored:</label> <div class="input-container"> <div class="buttons"> <button><</button> <button>></button> </div> <input type="text"/> </div> </div> <br/> <div> <label>Top margin works:</label> <div class="input-container with-before"> <div class="buttons"> <button><</button> <button>></button> </div> <input type="text"/> </div> </div>
The label
element is inline-level by default. 默认情况下,
label
元素为内联级别。 As such, it ignores vertical margins (and padding and height). 因此,它会忽略垂直边距(以及边距和高度)。
8.3 Margin properties:
margin-top
,margin-right
,margin-bottom
,margin-left
, andmargin
8.3边距属性:
margin-top
,margin-right
,margin-bottom
,margin-left
和margin
[
margin-top
andmargin-bottom
] have no effect on non-replaced inline elements.[
margin-top
和margin-bottom
]对未替换的内联元素没有影响。
However, inline-level elements are subject to the vertical-align
property, and the default value is baseline
, which means they align vertically per their inline content, such as images, inputs or text. 但是,内联级别的元素必须具有
vertical-align
属性,并且默认值为baseline
,这意味着它们会根据其内联内容(例如图像,输入或文本)进行垂直对齐。
You can override this behavior with another value, such as bottom
. 您可以使用另一个值(例如
bottom
覆盖此行为。
label { margin: 20px 5px 0 0; vertical-align: bottom; } .input-container { display: inline-flex; } button { display: flex; flex-direction: column; }
<div> <label>Top margin ignored:</label> <div class="input-container"> <div class="buttons"> <button><</button> <button>></button> </div> <input type="text" /> </div> </div> <br/> <div> <label>Top margin works:</label> <div class="input-container with-before"> <div class="buttons"> <button><</button> <button>></button> </div> <input type="text" /> </div> </div>
As to how the ::before
pseudo-element "fixes" the problem, here are two comments / observations: 关于
::before
伪元素如何“修复”问题,这是两个评论/观察结果:
Adding the ::before
pseudo-element does not get the top margin to work. 添加
::before
伪元素不会获得最大的边距。 If you remove that margin, you'll see that the label is still aligned to the bottom with the pseudo. 如果删除该边距,您将看到标签仍与伪标签对齐到底部。
I think the pseudo – when empty – shifts the label down because it establishes a new baseline for the container. 我认为伪标记(当为空时)会将标签向下移动,因为它为容器建立了新的基线。 However, if you add any content to it (I just tried
content: "x"
), the label shifts right back to the top. 但是,如果您向其中添加任何内容(我刚刚尝试了
content: "x"
),则标签将右移回到顶部。
I'm pretty sure this is all related to a shifting baseline. 我很确定这与基线的变化有关。 Again, just override the
baseline
value in vertical-align
with bottom
, middle
or top
. 同样,只需将
baseline
值与bottom
, middle
或top
vertical-align
。
More information: 更多信息:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.