css - 输入 "enter"会导致 html 换行。为什么?

标签 css html

<分区>

这将是 CSS 人员拍打额头然后说“你一定是在开玩笑”的事情之一,对此我深表歉意。对于无法在 Stackoverflow 上找到类似的问题,我也深表歉意,我很确定,一定有一个。

看看这个 JSfiddle:https://jsfiddle.net/kwende/fqxna79a/

你会注意到里面有两个标签:

<div id="left">Left</div><div id="right"><p>Right</p><p>Right 2</p></div>

令我感到奇怪的是,如果您输入 ENTER(在 Chrome 和 Edge 中)并因此在第一个和第二个 div 之间创建一个换行符,绿色和红色 block 不再在同一行上。但是 CSS 没有改变。没有更改标记。我不明白为什么(这是我理解的一部分,这无关紧要)文本文档本身内的换行符会在标记的呈现中创建一个新行。但它显然确实如此。

示例:

enter image description here

是我没有回车的地方,还有

enter image description here

更新:好像这个问题之前已经回答过了。 Here是了解正在发生的事情的一个很好的链接。

最佳答案

问题不是实际的换行符,而是您在两个 div 元素之间输入了任何空格这一事实。

因为您将它们设为 inline-block,这使得它们表现得像内联元素,如果没有间距,它们将彼此相邻放置。

但是,当您在它们之间插入空格时,布局算法会发现 20% + white space + 80% 大于 100%,因此将第二个div 另起一行。

您可以通过使第二个 div 79%,同时添加空格(或换行符)来验证此行为。在这种情况下,div 元素仍将彼此相邻。

关于css - 输入 "enter"会导致 html 换行。为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34939045/

相关文章:

html - 在 Bootstrap 中以响应方式在导航栏之后的 Div 区域

CSS更改文本区域上调整大小按钮的光标样式

javascript - onmouseover javascript 函数未链接?

asp.net - 如何在 ASP.NET 中动态添加 HTML 标题?

javascript - 如何从同一个输入框中获取多个输入并存储它们?

html - CSS - 显示 :none action not working

javascript - 通过 JS (ASP.NET MVC) 切换 div

javascript - Twitter Bootstrap .popover 不工作

html - 浏览器不一致

html - 将水平列表与另一个 div 对齐