Fatal编程技术网
  • html/
  • Html 语义标记：链接后换行

Html 语义标记：链接后换行

html css

Html 语义标记：链接后换行,html,css,semantic-markup,Html,Css,Semantic Markup,我想： 显示一系列链接，每个链接位于新行上 保持链接的可变宽度和文本环绕能力 将每个链接的鼠标悬停区域约束到其实际内容 将链接保留在内容流中 我能想到的最好的解决办法是 <div> <a href="">Text</a> </div> <div> <a href="">Text</a> </div> ，但我不喜欢添加非语义的。我尝试使用{code>a{float:left；cle

我想：

  • 显示一系列链接，每个链接位于新行上
  • 保持链接的可变宽度和文本环绕能力
  • 将每个链接的鼠标悬停区域约束到其实际内容
  • 将链接保留在内容流中
    • 我能想到的最好的解决办法是

    <div>
    <a href="">Text</a>
</div>
<div>
    <a href="">Text</a>
</div>
    ，但我不喜欢添加非语义的
    。我尝试使用{code>a{float:left；clear:tweet}，但这会使链接脱离内容流。据我所知，我不能使用伪选择器，例如
    ：outer wrapper
    。是否有更好的解决方案，或者
    包装器是最好的解决方案

    *我曾想过使用
    • ，但我每页只有一个或两个链接，而且似乎没有理由添加
      • 来代替
        ，只是为了避免出现
        选项：
（将它们包装在内容中）
        

      • display:table
        ，以堆叠它们
        • 

      • 显示：内联块
        或
        • 

      • float:left
        将它们放在一行上
        • 
对于标记，可以换行
        
注意：如果导航不必要，可以使用任何其他标记，例如页脚或段落。
详情如下：
        
Thx所有选项可以是：
（将它们包装在内容中）
        

      • display:table
        ，以堆叠它们
        • 

      • 显示：内联块
        或
        • 

      • float:left
        将它们放在一行上
        • 
对于标记，可以换行
        
注意：如果导航不必要，可以使用任何其他标记，例如页脚或段落。
详情如下：
        

        Thx all
        这在很大程度上是一个基于观点和哲学的问题，是关于“语义标记”（语义标记本身是一个语义模糊的概念）的无休止和无用争论的根源。但要把问题转到更具建设性的方面，我想问一下，使用哪种标记真正重要。在非CSS渲染或使用辅助软件时，它意味着什么
        

        从这个角度来看，
        ul
        如果默认渲染（带有项目符号）是可以接受的。否则，请在链接之间使用
        div
        ，或使用
        br
        。不要试图使用带有样式的
        a
        ，因为这样链接将默认一起运行，显示为没有分隔符的内联文本。
        这在很大程度上是一个基于观点和哲学的问题，是关于“语义标记”（语义标记本身是一个语义模糊的概念）的无休止和无用争论的根源。但要把问题转到更具建设性的方面，我想问一下，使用哪种标记真正重要。在非CSS渲染或使用辅助软件时，它意味着什么
        

        从这个角度来看，
        ul
        如果默认渲染（带有项目符号）是可以接受的。否则，请在链接之间使用
        div
        ，或使用
        br
        。不要尝试在样式设置中使用
        a
        ，因为在默认情况下，链接将一起运行，显示为不带分隔符的内联文本。
        从语义上看，您希望在页面上放置的似乎是一个链接列表。所以就用这个吧
        

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

        

        您可以考虑，或者您可以完全忘记<代码> UL<代码>，并且只是
        

        nav > a { display: block; }

        

        另外，不要认为所有的
        div
        s都是非语义的。是的，它们没有特定的含义，但是规范说它们代表了它们的内容。
        div
        的一个非常好的用途是将具有相同主题或功能的元素组合在一起。在你的情况下，我不会有一个只包含一个
        a
        的
        div
        ，因为你认为
        div
        充当bloat是正确的。
        从语义上看，你想放在页面上的似乎是一个链接列表。所以就用这个吧
        

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

        

        您可以考虑，或者您可以完全忘记<代码> UL<代码>，并且只是
        

        nav > a { display: block; }

        

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

        需要多少项才能有一个项目列表？你可以使用

        需要多少项才能有一个项目列表？如果链接是用于站点/页面导航，你应该只使用
        nav
        。@GCyrillus在你的答案中说明这一点（这是你答案的一个非常有趣的附加组件，我不知道）@基里鲁斯：以什么方式说“不”？：“链接到其他页面或页面内部分的页面部分：带有导航链接的部分”刚刚编辑了我的答案。我会听的，因为英语不是我的母语，我可能会误解：）你指的是WAI-ARIA角色。但是，无论您使用哪个ARIA角色，您都应该根据HTML规范使用HTML元素。如果链接用于站点/页面导航，您应该只使用
        nav
        。@GCyrillus您应该在答案中指定这一点（这是您答案的一些非常有趣的附加内容，我不知道）@基里鲁斯：以什么方式说“不”？：“链接到其他页面或页面内部分的页面部分：带有导航链接的部分”刚刚编辑了我的答案。我会听的，因为英语不是我的母语，我可能会误解：）你指的是WAI-ARIA角色。但不管你扮演哪个角色，您仍然应该根据HTML规范使用HTML元素。感谢您提醒我明显的
        br
        ，并提醒我在没有CSS应用的情况下页面是什么样子感谢您提醒我明显的
        br
        并提醒我在没有CSS应用的情况下页面是什么样子