為什么 inline-flex / inline-grid 的行為與 contenteditable 中的 inline 不一致？
[英]Why doesn't inline-flex / inline-grid behave consistently as with inline in contenteditable?
問題描述
當我使用display: inline-flex; 或顯示：inline-grid； 似乎有一些額外的“空間”或某種額外的重點計算發生。 我不確定到底發生了什么。 當使用箭頭鍵在 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>
2 個解決方案
解決方案1
1 2020-09-22 14:45:05
Flexbox 是一個一維布局系統，我們可以使用它來創建行或列軸布局。 在display: flex屬性中，您在該 flex 父容器中擁有的每個元素都變成了一個 flex 項目。 因此，當使用箭頭鍵導航時，插入符號會“卡在”“Hello”和“World”之間。
CSS 網格是一個二維布局系統，我們可以將行和列一起工作。 它為構建更復雜和更有組織的設計系統開辟了許多不同的可能性。
“CSS 網格用於布局，Flexbox 用於對齊” 。 更多參考Grid 和 flexbox ，當它使用 Grid 和 FlexBox 時
flex：該值使元素生成塊級 flex 容器框。
inline-flex：這個值會導致一個元素生成一個內聯級別的 flex 容器框。
grid：該值使元素生成塊級網格容器框。
inline-grid：該值使元素生成內聯級網格容器框。
您可以使用以下代碼來防止插入符號在使用箭頭鍵導航時“卡住”在“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>
解決方案2
0 2020-09-23 14:43:50
這些是flex,inline-flex,space-between 。
所以使用flex and space-between你可以在元素flex and space-between留出空間。
展示 -
flex : 將元素顯示為塊級 flex 容器
inline-flex : 將元素顯示為內聯級 flex 容器
證明內容 -
space-between 項目放置在行之間的空間 答案：
選項1
<!DOCTYPE html> <html> <body> <div contenteditable="true" style="background-color: cornflowerblue;"><span style="display: inline-flex;"><span>Hello</span></span><span style="display: inline-flex;color: white;">World!</span></div> <div contenteditable="true" style="display: flex ;justify-content: space-between;background-color: coral;"><span style="display: inline;background-color: cyan;"><span style="color: white;">Hello</span></span><span style="display: inline;">World!</span></div> <div contenteditable="true" style="display: inline-flex;background-color: coral;"> <span style="display: inline;background-color: cyan;"><span style="color: white;">Hello</span></span><span style="display: inline;">World!</span></div> </body> </html>
您還可以使用justify-content: space-between在Hello World!之間Hello World!空間Hello World!
選項 2
<!DOCTYPE html> <html> <body> <div contenteditable="true" style="background-color: cornflowerblue;" ><span style="display: inline-flex;"><span>Hello</span></span><span style="display: inline-flex;color: white;">World!</span></div> <div contenteditable="true" style="display: flex;justify-content: space-between;background-color: coral;"><span style="display: inline;background-color: cyan;"><span style="color: white;">Hello</span></span><span style="display: inline;">World!</span></div> <div contenteditable="true" style="justify-content: space-between;background-color: coral;"><span style="display: inline;background-color: cyan;"><span style="color: white;">Hello</span></span><span style="display: inline;">World!</span></div> </body> </html>
這與選項 1 相同
如果您遵循第一個選項，您應該同時使用display: flex ;justify-content: space-between; 但如果你遵循第二個選項，那么你應該只放置justify-content: space-between; 並display: flex ; 是可選的。
為什么文本溢出：省略號不適用於 Firefox 中的 display: inline-flex？
[英]Why doesn't text-overflow: ellipsis not work with display: inline-flex in Firefox?
顯示：inline-flex； 和 flex-wrap:wrap; 不填充上一行文本
[英]display: inline-flex; AND flex-wrap:wrap; doesn’t fill previous line of text
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.