1

我想要：

  1. 显示一系列链接，每一个都在新的一行
  2. 保持链接的可变宽度和文本换行能力
  3. 将每个链接的鼠标悬停区域限制为其实际内容
  4. 将链接保留在内容流中

我能想到的最好的解决方案是

<div>
    <a href="">Text</a>
</div>
<div>
    <a href="">Text</a>
</div>

，但我不喜欢添加非语义的<div>. 我尝试使用a { float: left; clear: both }，但这将链接从内容流中取出。据我所知，我不能使用伪选择器，例如:outer-wrapper. 有更好的解决方案，还是<div>包装器是最好的解决方案？

*我想过使用<ul><li><a>，但我每页只有一两个链接，<ul><li>为了<div>避免<div>

4

3 回答 3

3

这在很大程度上是一个基于观点的哲学问题，是关于“语义标记”的无休止和无用辩论的根源，“语义标记”本身就是一个语义模糊的概念。但是为了把这个问题变成更有建设性的东西，我会问你使用哪种标记真正重要的是什么。它在非 CSS 渲染或使用辅助软件时意味着什么？

从这个角度来看，ul如果带有项目符号的默认渲染是可以接受的，那么就可以了。否则，使用div，或br在链接之间使用。不要尝试仅a与样式一起使用，因为这样链接默认情况下会一起运行，显示为没有分隔符的内联文本。

于 2013-06-14T16:28:35.303 回答
1

选项可能是：（ 将它们包装在它们的内容上）

  1. display:table, 将它们堆叠起来。
  2. display:inline-block或者，
  3. float:left让他们在一条线上。

对于标记，您可以包装<a>成<nav>标签。并添加一个角色属性以将其与主导航区分开来或用于主导航。
http://www.w3.org/TR/wai-aria/roles#landmark_roles

注意：如果不需要导航，可以使用任何其他标签，例如页脚或段落。更多信息：http: //www.w3.org/html/wg/drafts/html/master/sections.html#the-nav-element

谢谢大家

于 2013-06-14T16:27:08.017 回答
0

从语义上讲，您想在页面上放置的似乎是链接列表。所以就用那个。

ul > li > a { /*whatever you want*/ }

您可能会考虑将列表包装在 a 中nav，或者您可以完全忘记ul并只

nav > a { display: block; }

另外，不要认为所有divs的 s 都是非语义的。是的，它们没有特定的含义，但规范说它们代表了它们的内容。a 的一个非常好的用途是div将具有相同主题或功能的元素组合在一起。在你的情况下，我不会div只包含一个a，因为你认为div作为膨胀是正确的。

于 2013-07-29T05:29:00.227 回答