html - 为什么 inline-flex/inline-grid 的行为与 contenteditable 中的 inline 不一致?

标签 html css

当我使用 显示:inline-flex; 显示:内联网格; 似乎有一些额外的“空间”或某种额外的重点计算发生。我不确定到底发生了什么。当使用箭头键在 contentediatble div 中导航时,插入符号会卡住,好像它专注于不同的元素或其他东西。有谁知道原因?如果是这样,无论如何要防止这种行为(不使用 JavaScript 来处理事件)?
考虑以下两个 contenteditable div 之间的区别:
(使用箭头键导航时,插入符号会“卡在”“Hello”和“World”之间)

<div contenteditable="true"><span style="display: inline-flex;"><span>Hello</span></span><span style="display: inline-flex;">World!</span></div>

<div contenteditable="true"><span style="display: inline;"><span>Hello</span></span><span style="display: inline;">World!</span></div>

最佳答案

Flexbox 是一个一维布局系统,我们可以使用它来创建行或列轴布局。在 display: flex属性,您在该 flex 父容器中拥有的每个元素都会变成一个 flex 元素。因此,当使用箭头键导航时,插入符号会“卡在”“Hello”和“World”之间。
CSS 网格是一个二维布局系统,我们可以将行和列一起工作。它为构建更复杂和更有组织的设计系统开辟了许多不同的可能性。
“CSS 网格用于布局,Flexbox 用于对齐”。更多引用Grid and flexbox , When it uses Grid and FlexBox
flex :
该值使元素生成块级 flex 容器框。
内联 flex :
这个值会导致一个元素生成一个内联级别的 flex 容器框。
网格:
该值使元素生成块级网格容器框。
内联网格:
该值使元素生成内联级网格容器框。
您可以使用以下代码来防止插入符号在使用箭头键导航时“卡住”在“Hello”和“World”之间)。

<div contenteditable="true"><span style="display: inline-block; margin-right: 2px">Hello</span><span style="display: inline-block;" >World!</span></div>

<div contenteditable="true"><span style="display: inline-block;">Hello</span><span style="display: inline-block;" >World!</span></div>

<div contenteditable="true" style="display: flex; justify-content: space-between;"><span>Hello</span><span>World!</span></div>

关于html - 为什么 inline-flex/inline-grid 的行为与 contenteditable 中的 inline 不一致?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63795711/

相关文章:

php - "Back to search results"问题

css - Fontawesome 5 额外的顶部和底部填充

css - 如何使用 SCSS 颜色函数来模拟白色透明覆盖层?

Javascript不改变文档?

Javascript 在鼠标向下拖动时旋转

css - 将 div 的高度作为其内容或作为其父级(如果它较小)

javascript - 独立显示和隐藏内容

javascript - Node.js 代码未在 javascript 函数中运行

html - 如何在 HTML 中复制缩进正确排列的 <ol><li> 元素符号列表?

html - 框内图像旁边的文本未对齐