堆栈内存溢出
  简体   繁体   English

为什么内联块元素出现在内联元素下面？ 如何让它们出现在同一条线上？

[英]Why does the inline-block element appear below the inline element? How to make them appear on the same line?

 原文  2019-01-13 19:46:20  9   4    html/ css

问题描述

I am currently trying to understand basic HTML and CSS concepts and came across a very peculiar problem. 我目前正在尝试理解基本的HTML和CSS概念，并遇到了一个非常奇怪的问题。 I have two elements one having display: inline and the other having display: inline-block. 我有两个元素，一个有显示：内联，另一个有显示：内联块。 I am trying to create a list, something of this sort 1. SOME CONTENT THAT WILL OCCUPY MORE THAN ONE LINE I have the numeral as an inline element and the corresponding content as an inline-block. 我正在尝试创建一个列表，这种类型的东西1. SOME CONTENT THAT WILL OCCUPY MORE THAN ONE LINE我将数字作为内联元素，相应的内容作为内联块。 I don't want to use <ul> or <ol> as it involves fairly esoteric CSS that I am not prepared given the place where I am at. 我不想使用<ul>或<ol>因为它涉及相当深奥的CSS，我没有根据我所处的位置准备。

My question is if the content of the inline block element is more than one line then why does the inline-block element appear on a line of its own? 我的问题是如果内联块元素的内容是多行，那么为什么内联块元素出现在它自己的一行上？ From what I understand the width of inline and inline block elements are constrained by the content. 根据我的理解，内联块和内联块元素的宽度受内容约束。

I tried setting vertical-align: top but to no avail. 我尝试设置vertical-align：top但无济于事。 I looked at this question on stack overflow: Why does the innerHTML of several inline-blocks nested in a block element affect the positioning of the inline-blocks? 我在堆栈溢出上看了这个问题： 为什么嵌套在块元素中的几个内联块的innerHTML会影响内联块的定位？ . 。 

 #numeral{ display: inline; } #content { display: inline-block; vertical-align: top; } 
  <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8"> <title>Test</title> <link rel="stylesheet" href="./test.css"/> </head> <body> <span id="numeral">1.</span> <span id="content">BLAH BLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAH</span> </body> </html>

I expected the next line to start directly below the inline-block element but this is not happening. 我希望下一行直接从内联块元素下面开始，但这不会发生。 How should I achieve this effect? 我该怎样实现这个效果？

4 个解决方案

解决方案1
 1  2019-01-13 20:09:23

An inline-block element is placed as an inline element (ie on the same line as adjacent content) Only if it's width will fit within the remaining space. 内联块元素被放置为内联元素（即与相邻内容在同一行上） 仅当它的宽度适合剩余空间时。

In order to understand this better, specify the width of #content so it will fit next to #numeral ( display: inline-block allows to set a width and height on the element ) as following: 为了更好地理解这一点，请指定#content的宽度，使其适合#numeral（ display：inline-block允许在元素上设置宽度和高度 ），如下所示： 

#numeral {
    display: inline;
}

#content {
    display: inline-block;
    vertical-align: top;
    width: 90%;
}

解决方案2
 1 已采纳  2019-01-13 20:17:52

inline-block * will not share a space inline with another element if you don't give it a width. 如果你不给它一个宽度， inline-block *将不会与另一个元素共享一个空格。 So either inline both which is sloppy, or use inline-block , widths , and vertical-align for smaller content such as #numeral . 因此，无论是inline还是inline ，或者使用inline-block ， widths和vertical-align来处理较小的内容，例如#numeral 。 Note, #numeral width is 2ch a ch unit is roughly about the width of a character for the exact description see this article 注意， #numeral宽度为2ch ，ch单位大致约为字符的宽度，具体描述见本文

* when it's content exceeds the width of it's element's parent's width * 当它的内容超出元素父元素宽度的宽度时

Demo 演示 

 #numeral { display: inline-block; width:2ch; vertical-align:top } #content { display: inline-block; width:90%; } 
 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8"> <title>Test</title> </head> <body> <span id="numeral">1.</span> <span id="content">BLAH BLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH </span> </body> </html>

解决方案3
 1  2019-01-13 20:19:30

If you were to reduce the length of the 'blah' text you will find that your markup does what you desire. 如果你要减少'blah'文本的长度，你会发现你的标记符合你的要求。 But that doesn't solve the problem in its totality for removing the display: inline-block css property from the #content id selector will achieve a similar result. 但这并没有解决display: inline-block移除display: inline-block来自#content id选择器的display: inline-block css属性将实现类似的结果。 Again the question is why? 问题又是为什么？

The answer lies in the very central question you asked: if the content of the inline block element is more than one line then why does the inline-block element appear on a line of its own? 答案在于您提出的最核心问题： 如果内联块元素的内容多于一行，那么为什么内联块元素出现在它自己的一行上？ You should strive to answer and understand this query as it will lead to a satisfactory answer. 您应该努力回答并理解这个问题，因为它会得到满意的答案。

The answer is to better understand three vital elements of HTML5 and CSS3 that you cannot avoid if you wish to wield web development tools to your needs: normal flow of a document, the css box model including the visual formatting model and the block formatting context . 答案是更好地理解HTML5和CSS3的三个重要元素，如果您希望根据需要使用Web开发工具，则无法避免：文档的正常流程 ，包括可视化格式模型和块格式化上下文的css框模型 。

a great free resource that will give you ample exposure to these fundamentals, in addition to the resources I've already provided at the MDN, can be found at freecodecamp.org under their responsive web design course. 除了我已经在MDN提供的资源之外，还有一个很好的免费资源可以让你充分了解这些基础知识，可以在freecodecamp.org的响应式网页设计课程中找到。 They are quick and insightful. 他们快速而富有洞察力。 The W3C also provides a great resource for study and examples. W3C还为学习和示例提供了很好的资源。

Grasping these root concepts will give you the arsenal you need to tackle these problems and I have provided them in the order of study. 掌握这些根本概念将为您提供解决这些问题所需的武器库，并按照研究顺序提供它们。

解决方案4
 0  2019-01-13 20:00:53

Well, firstly the second span is using a closing tag of </div> make it </span> 好吧，首先，第二个范围是使用</div>的结束标记使其成为</span>

Not sure what you're going for if it's a numerated/bulleted structure but you can make both of the spans display inline : 如果它是一个数字/项目符号结构，你不知道你想要什么，但你可以使两个跨度显示为inline ： 

#content, #numeral {
 display: inline;
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何让行内元素出现在新行上，或者块元素不占满整行？ - How to make an inline element appear on new line, or block element not occupy the whole line? 如何使内联块元素跨越文本行的其余部分？ - How to make an inline-block element span the rest of the text line? 为什么内联块元素的边距会影响同级内联块元素 - Why Does The Margin From An Inline-Block Element Affect A Sibling Inline-Block Element 内联代码块与内联代码似乎没有共享相同的基准 - inline-block vs inline do not appear to share the same baseline 将内联块元素清除到下一行 - Clearing an inline-block element to the next line 为什么这些内联块元素会产生额外的宽度？ - Why does these inline-block element produce extra width? 为什么这个内联块元素的内容不是垂直对齐的 - Why does this inline-block element have content that is not vertically aligned 内联块元素与另一个内部具有Block元素的内联块元素不匹配 - Inline-block element not in line with another inline-block element that has a Block element inside 内联块适用于哪个元素？ - To which element does inline-block apply? 浮动元素是否会将其变成“内联块”？ - Does floating an element turns it into an “inline-block”?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM