在 HTML 中不使用 <br> 换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9134439/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make new line without using <br> in HTML
提问by palAlaa
I want to make each one of these element is different line, without using <br />in HTML, <h1>is block element but I have to fix its width. How can I make anchors come under <h1>not beside?
我想让这些元素中的每一个都是不同的行，而不<br />在 HTML 中使用，<h1>是块元素，但我必须修复它的width. 我怎样才能让锚<h1>不在旁边？
<h1 id="viewerTitle">Header </h1>
<a href="#" class="view-options">View options</a>
<a href="#" class="view-options">View options</a>
Here's an example: http://jsfiddle.net/mmhhd/
这是一个例子：http: //jsfiddle.net/mmhhd/
回答by Kylos
Start by removing float: leftfrom h1.
通过移除开始float: left从h1。
Then add the rule:
然后添加规则：
a.view-options {
display: block;
}
回答by Rannnn
Alternative way:
替代方式：
Remove float:left;in h1and display: inline-block;in a.view-options
删除float:left;的h1，并display: inline-block;在a.view-options
Then add
然后加
h1:after, a:after {
content:"\a";
white-space: pre;
}
回答by Waiting for Dev...
Use CSS:
使用 CSS：
a {
display: block;
}
By default atag is an inline element, so you have to change its display property.
默认情况下a标签是一个内联元素，所以你必须改变它的显示属性。
From the CSS specification:
来自 CSS 规范：
Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the 'display' property make an element block-level: 'block', 'list-item', and 'table'.
块级元素是源文档中在视觉上格式化为块（例如，段落）的那些元素。'display' 属性的以下值使元素成为块级：'block'、'list-item' 和 'table'。
http://www.w3.org/TR/CSS2/visuren.html#block-boxes
http://www.w3.org/TR/CSS2/visuren.html#block-boxes
Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). The following values of the 'display' property make an element inline-level: 'inline', 'inline-table', and 'inline-block'. Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.
行内元素是源文档中不构成新内容块的元素；内容按行分布（例如，段落中强调的文本片段、内嵌图像等）。'display' 属性的以下值使元素成为行内级别：'inline'、'inline-table' 和 'inline-block'。内联级元素生成内联级框，这些框是参与内联格式上下文的框。
回答by Madara's Ghost
Use CSS to make the anchor link tags blocks:
使用 CSS 制作锚链接标签块：
a.view-options { display: block; }
回答by DA.
Make the anchor tags block elements as well.
也使锚标记块元素。
回答by user3814123
This is the way that works for me.
这是对我有用的方式。
p.autonewline {white-space: pre-line;}
回答by Caleb Doucet
Take float off the h1 tag and make a tags' display: display: block;
从 h1 标签上取下浮动并显示标签： display: block;
