英文:
HTML elements in the browser appearing as inline instead as block elements
问题
以下是您要翻译的内容：
我的以下代码用于在浏览器上创建一个简单的网页：
网页上的按钮显示为内联元素，而不是依次排列在顶部。使用 flexbox 也出现相同的问题。容器内的项目变成内联元素，而没有指定 display: flex-inline。
我尝试添加了一个 <br> 标签。
英文:
My following code for a simple webpage on the browser:
The buttons on the webpage show up as inline elements instead of of one on top of the other consecutively. Happens as well with using flexbox. Items within the container become inline without stating display: flex-inline.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<h1 id="id1">My Heading 1</h1>
<p id="demo"></p>
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>
<button onclick="displayDate()">Try it</button>
<!-- end snippet -->
I tried adding a <br> tag
答案1
得分: 1
按钮默认是内联元素（实际上是内联块级元素）。
当你将一个元素设置为 display: flex 或 display: flex-inline 时，它的 子元素 会默认水平排列，或者垂直排列（如果你指定了 flex-direction: column）。
flex 和 flex-inline 的区别在于 父元素 的渲染方式，而不是子元素。
如果你想要按钮显示在连续的行上，你可以：
- 在它们之间使用
<br>标签（不涉及到 flexbox），或者 - 将每个按钮放在单独的块级元素内，比如
<div>（同样不涉及到 flexbox），或者 - 还有其他很多选项。
我无法推断出你的数据的语义（主要因为它似乎是一堆演示元素的混合，而不是一段简单的文本），所以我不能评论哪种选项是合适的。
英文:
Buttons are inline elements (well, inline-block) by default.
When you make an element display: flex or display: flex-inline its children are arranged in a row (by default) or column (if you specify flex-direction: column).
The difference between flex and flex-inline is how the parent element is rendered, not the children.
If you want the buttons displayed on consecutive lines then you can:
- use a
<br>between them (without involving flexbox) or - put each on in a separate block element such as a
<div>(also without involving flexbox) or - numerous other options
I can't infer the semantics of your data (largely because it seems to be a mishmash of demo elements and not a straight-forward text) so I can't comment on which option(s) would be appropriate.
答案2
得分: 0
<button> 不是一个块级元素。要将它们垂直堆叠，有几种方法：
1- 一种方法是将它们包裹在<div>中：
<div>
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">
Click Me!
</button>
</div>
<div>
<button onclick="displayDate()">
Try it
</button>
</div>
2- 另一种方法是在它们上应用display: block样式：
<button style="display: block"></button>
3- 或者将它们都包裹在一个<div>中，将其显示设置为flex，并将flex-direction设置为column：
<div style="display: flex; flex-direction: column">
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">
Click Me!
</button>
<button onclick="displayDate()">
Try it
</button>
</div>
英文:
<button> is not a block element. To stack them on top of each other,
1- one way is to wrap them in <div>s
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<h1 id="id1">My Heading 1</h1>
<p id="demo"></p>
<div>
<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>
</div>
<div>
<button onclick="displayDate()">Try it</button>
</div>
<!-- end snippet -->
2- Another is to use display: block style on them.
<button style="display: block"></button>
3- Or to wrap both of them in a <div> with display set to flex and flex-direction to column
<div style="display: flex; flex-direction: column">
<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>
<button onclick="displayDate()">Try it</button>
</div>
答案3
得分: 0
默认情况下，按钮的显示为inline-block。如果您想更改此设置，请显式设置display属性。
button {
display: block;
}
英文:
By default, buttons have a display of inline-block. If you want to change that, explicitly set the display.
button {
display: block;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论