英文:
I can't stop getting two pieces of text to go beneath another, instead I want them to be side by side
问题
当使用这段代码时：
<h2>文本</h2>
<h2>更多文本</h2>
最终显示如下：
文本
更多文本
由于某种原因，感觉两个文本的右侧有一个看不见的障碍，阻止我将它们并排放置（甚至在屏幕的相反侧）。
这是我想要它看起来的样子：
文本 更多文本
英文:
When using this code:
<h2>Text</h2>
<h2>More Text</h2>
It ends up like this:
Text
More Text
For some reason, it feels as though there is an invisible barrier to the right of the two texts, preventing me from placing them side by side. (or even to the opposite side of the screen).
This is what I want it to look like:
Text More Text
答案1
得分: 0
在HTML中，有两种类型的元素：block（块级元素）和inline（内联元素）。
h2元素是一个块级元素。
根据w3schools：
> 块级元素始终从新行开始，浏览器会自动在元素前后添加一些空间（边距）。
> 块级元素始终占用可用的全宽度（左右伸展，尽可能占满宽度）。
> 内联元素不会从新行开始。
> 内联元素仅占据必要的宽度。
例如：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.border-red{
border: 1px solid red;
}
<!-- language: lang-html -->
<span class="border-red" >Hello World（span元素是内联）</span>
<button class="border-red" >Hello World（button元素是内联）</button>
<h2 class="border-red" > Hello world（h2元素是块级）</h2>
<p class="border-red" > Hello world（p元素是块级）</p>
<!-- end snippet -->
你可以使用CSS修改这些行为。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.border-red {
border: 1px solid red;
}
.inline {
display: inline
}
.block {
display: block
}
<!-- language: lang-html -->
<span class="border-red block" >Hello World（span元素是内联）</span>
<button class="border-red block" >Hello World（button元素是内联）</button>
<h2 class="border-red inline" > Hello world（h2元素是块级）</h2>
<p class="border-red inline" > Hello world（p元素是块级）</p>
<!-- end snippet -->
英文:
In HTML, there are two types of elements: block and inline.
The h2 element is a block element.
According to w3schools
> A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.
> A block-level element always takes up the full width available (stretches out to the left and right as far as it can).
> An inline element does not start on a new line.
> An inline element only takes up as much width as necessary.
for example :
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.border-red{
border: 1px solid red;
}
<!-- language: lang-html -->
<span class="border-red" >Hello World (span element is an inline)</span>
<button class="border-red" >Hello World (button element is an inline)</button>
<h2 class="border-red" > Hello world (h2 element is a block) </h2>
<p class="border-red" > Hello world (p element is a block) </p>
<!-- end snippet -->
You can modify these behaviors using CSS.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.border-red {
border: 1px solid red;
}
.inline {
display: inline
}
.block {
display: block
}
<!-- language: lang-html -->
<span class="border-red block" >Hello World (span element is inline)</span>
<button class="border-red block" >Hello World (button element is inline)</button>
<h2 class="border-red inline" > Hello world (h2 element is a block) </h2>
<p class="border-red inline" > Hello world (p element is a block) </p>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论