CSS 使 <a> 标签移动到新行，而不使用“display:block”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10000674/
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 an <a> tag move onto a new line, without using "display:block"
提问by Caroline Elisa
I would like the navigation links on this pageto each appear on their own line:
我希望此页面上的每个导航链接都显示在自己的行上：
A. Without using "display:block" - as that makes the hover animation take up the full width of the container, not just the <a>element.
A. 不使用“ display:block” - 因为这会使悬停动画占据容器的整个宽度，而不仅仅是<a>元素。
B. Without using <br>tags, as I am eventually looking to create a responsive site with a horizontal navigation on smaller screens.
B. 不使用<br>标签，因为我最终希望在较小的屏幕上创建一个具有水平导航的响应式网站。
Thanks for your help.
谢谢你的帮助。
回答by Ricardo Casta?eda
Have you tried float:left; clear:left?
你试过float:left; clear:left吗？
回答by David Nguyen
wrap you navigation in ul, li:
将您的导航包裹在 ul, li 中：
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
css:
css：
ul {list-style: none} li {display: block}
ul {list-style: none} li {display: block}
This lets you style your anchors accordingly while forcing them to break lines.
这使您可以相应地设置锚点的样式，同时强制它们断线。
回答by Khan
You can wrap the <a>'s in <div>'s and apply CSS to the div's to float:left, clear:left;
您可以将<a>'s包裹在's 中<div>并将 CSS 应用于div's 到float:left, clear:left;
div.anchorContainer
{
float:left;
clear:left;
}
<div class="anchorContainer">
<a href="#">text</a>
</div>
<div class="anchorContainer">
<a href="#">text</a>
</div>
<div class="anchorContainer">
<a href="#">text</a>
</div>
