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/

相关文章:

css - 如何选择包含特殊字符的 ID?

jquery - 如何让表格仅在页面上的自定义控件内滚动?需要 CSS 帮助

javascript - 打印时如何使div的宽度和高度为100%

javascript - 操作数据 - 使用 Javascript

html - 如何在 Bootstrap 中让背景图像占据整个屏幕宽度?

html - 在 anchor 标记中使用 bg-image 居中跨度

html - 如何使高度适合屏幕?

javascript - jQuery 函数无法正确加载 Bootstrap 页脚

php - 将数据库中的数据写入txt文件

css - VS 2008 自动更改我的 CSS 文件