使<a>标记移动到新行，而不使用"display:block“
使<a>标记移动到新行，而不使用"display:block“
提问于 2012-04-04 04:14:08
我希望this page上的每个导航链接都显示在各自的行上：
答:不使用"display:block“-因为这会使悬停动画占据容器的整个宽度，而不仅仅是<a>元素。
不使用<br>标签，因为我最终希望创建一个响应性的网站，在较小的屏幕上有一个水平导航。
谢谢你的帮助。
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-04-04 04:18:01
你试过float:left; clear:left吗？
Stack Overflow用户
发布于 2012-04-04 04:19:13
将导航包装在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：
ul {list-style: none} li {display: block}
这使您可以相应地设置锚点的样式，同时强制它们断线。
Stack Overflow用户
发布于 2012-04-04 04:20:13
您可以将<a>包装在<div>中，并将CSS应用于div中的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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10000674
复制相关文章
相似问题