Question

我正在为我正在进行的项目获得以下页脚：

<footer>
  License: <a href="#">Creative Commons BY</a>
  Email: <a href="mailto:#">email@mail.com</a>
  Telephone: <a href="tel:#">0123456789</a>
</footer>

对于这个页脚，我希望每个链接（及其前缀）都显示在一个单独的行上，我希望尽可能在语义上有效，而不添加不必要的标记。

我已经考虑过了：

<br>标签，但它只被认为是诗歌中的语义（或者类似的内容，其中换行符是信息的固有部分，所以我不能用它来打破这些行（见这个问题：<br> tag semantic alternative usage）
使用ul，但它实际上不是一个列表，因此将其包装在ul中也不是真正有效的选项。
使用固定宽度，但我真的很想找到一个动态解决方案。
用<p>围绕每一行，这看起来有点过头了，因为它不是真正的段落，而是我正在包装的单行。

在没有添加额外标记的情况下，以语义合理的方式打破这些行的最佳方法是什么？

Answer 1

我将其视为列表。然后<ul>标记可能是合适的。

甚至可以更好地将其视为定义列表，然后<dl><dt>是合适的。

示例：

<dl>
    <dt>License:</dt>
    <dd><a href="#">Creative Commons BY</a></dd>
    etc.
</dl>

要将它设置在不同的行上，只需将dts设置为float:left。

Answer 2

[...]语义上明智的方式，不添加额外的标记？

我怀疑你可以。我个人会为此使用定义列表。

<dl>
    <dt>License:</dt>
    <dd><a href="#">Creative Commons BY</a></dd>
    <dt>Email:</dt>
    <dd><a href="mailto:#">email@mail.com</a></dd>
    <dt>Telephone:</dt>
    <dd><a href="tel:#">0123456789</a></dd>
</dl>

要使它们显示为三行，您可以将DT元素向左浮动，例如。

dt {
    float: left;
    margin-right: 4px;
}

http://jsfiddle.net/2nbfg/

演示

这方面的优点是，在以后设置样式时，您可以获得更大的灵活性。查看http://jsfiddle.net/2nbfg/1/以获取其样式的替代方法。

有关详细信息，请参阅http://www.maxdesign.com.au/articles/definition/。

Answer 3

谈论语义，如果提供的联系信息与文档相关，这可能是<address>的一个很好的用例（我可以想，因为我看到许可信息包括¹）：请参阅http://html5doctor.com/the-address-element/以获取有关它的进一步参考。

（如果没有，html5doctor上的同一页面建议只使用hcard microformat使用<br>的pararaph，这是必要的）

所以在第一个场景中，我会选择

<footer>
    <p>
       License: <a href="#" rel="license">Creative Commons BY</a>
    </p>
    <address>
        Email: <a href="mailto:#">email@mail.com</a>
        Telephone: <a href="tel:#">0123456789</a>
    </address>
</footer>

和

footer p { margin: 0; }

footer address {
   font-style: normal; /* just because of default browser style */
}

footer address a:after {
  content: "";
  display: block;
}

参见jsbin示例：http://jsbin.com/ajohur/1/edit

^（1）编辑 - 正如@unor指出的那样，信息许可证可能应该在address元素之外，所以我把它包装在一个段落。

Answer 4

所以， whitout添加额外的标记如你所知，只有一个解决方案，使用链元素的伪元素并将其设置为块元素：

footer a:after {
  content: "";
  display: block;
}

但对我来说，这不是很语义，因为你应该把这些内容包装成其他东西。

Answer 5

我在语义上看作＆lt; dl＆gt;。

Answer 6

使用CSS你可以解决这个问题：

footer > a:before{
  content: "<br/>"
}

打破这些线条的语义正确方法是什么？

6 个答案: