我一直在使用这个列表，但在这种情况下最好的是什么？

Question

我一直在使用列表来创建它：

我不确定这是不是最好的。这是我的代码：

<ul class="contact-info">
  <li>Phone</li>
  <li class="phone"><a href="tel:+1(111)555-1234">+1(111)555-1234</a></li>
  <li>Email</li>
  <li class="mail"><a href="mailto:email@yoursite.com">email@yoursite.com</a></li>
</ul>

我似乎无法像图像那样得到它。就像我使用内联或内联块一样，它们都保持在同一条线上。

请帮忙！ ：）

Answer 1

如果您的DOM的特定结构没有理由，您可以将标签放在列表项中，以便它们最终位于同一行：

ul.contact-info {
  list-style: none;
  padding: 0;
  text-align: center;
}
ul.contact-info li span {
  padding-right: 10px;
  color: #999;
}
ul.contact-info li a {
  font-weight: bold;
  color: #333;
  text-decoration: none;
}
ul.contact-info li a:hover {
  text-decoration: underline;
}

<ul class="contact-info">
  <li class="phone"><span>Phone</span><a href="tel:+1(111)555-1234">+1(111)555-1234</a></li>
  <li class="mail"><span>Email</span><a href="mailto:email@yoursite.com">email@yoursite.com</a></li>
</ul>

Answer 2

是的，这很好......您可以使用地址标记或定义列表来显示您的联系信息，并且为了加强它，您可以使用schema.org元数据。

对于你的内联问题，你可以简单地将它们分成两个<ul> - s

<ul class="contact-info">
    <li>Phone</li>
    <li class="phone"><a href="tel:+1(111)555-1234">+1(111)555-1234</a></li>
</ul>
<ul>
    <li>Email</li>
    <li class="mail"><a href="mailto:email@yoursite.com">email@yoursite.com</a></li>
</ul>

定义列表

定义列表是术语列表和相应的定义。定义列表通常使用左侧的术语进行格式化，右侧或下一行的定义如下。定义文本通常根据术语缩进。

<dl>
    <dt>name:</dt>
    <dd>John Doe</dd>
    <dt>tel:</dt>
    <dd>01-2345678</dd>
    <dt>fax:</dt>
    <dd>02-3456789</dd>
    <dt>email:</dt>
    <dd>johndoe@someemail.com</dd>
</dl>

当然，结合tel:和mailto:协议

Example of definition list displaying contact information

地址标记

地址元素提供文档或文档的一部分的联系信息。地址提供的信息可能包括文档维护者的姓名，维护者网页的链接，反馈的电子邮件地址，邮政地址，电话号码等。地址元素不适用于所有邮政和电子邮件地址;它应保留用于提供有关文档联系人的此类信息。

<address>      
    UNIVERSITY INTERSCHOLASTIC LEAGUE<br>
    1701 Manor Road, Austin, TX 78722<br>
    Tel: (512) 471-5883 | Fax: (512) 471-5908
</address>

W3C Address element

搜索引擎的Schema.org微数据

您还可以查看schema.org微数据，以便设置信息在搜索结果中的显示方式......

<div itemscope itemtype="http://schema.org/LocalBusiness">
    <h1 itemprop="name">Beach Bunny Swimwear</h1>
    Phone: <span itemprop="telephone"><a href="tel:+18506484200">850-648-4200</a></span>
</div>

Adding Phone Numbers To Web Pages With HTML5 and Microdata

Schema.org

Answer 3

您还可以查看microformats：

http://microformats.org/wiki/h-card

  

h-card 是一种用于在网络上发布人员和组织的简单开放格式。 h-card是适用于在HTML中嵌入数据的几种开放微格式草案标准之一。

.h-card {
  text-align: center;
  color: gray;
  font-size: 20px;
}

.h-card a {
  color: inherit;
  font-weight: bold;
  text-decoration: none;
}

.h-card span {
  display: block;
}

.h-card .u-email:before {
  content: 'Email';
  padding-right: 1em;
}

.h-card .p-tel:before {
  content: 'Phone ';
  padding-right: 2.5em;
}

<p class=" h-card contact-info">
  <span class="phone p-tel"><a href="tel:+1(111)555-1234">+1(111)555-1234</a></span>
  <span class="mail u-email"><a href="mailto:email@yoursite.com">email@yoursite.com</a></span>
</p>

Answer 4

我最终使用了这个，但不确定它是否是非常好的代码：

 <ul class="contact-info">
  <li class="info"><a href="tel:+1(111)555-1234">Phone &nbsp;<strong>+1(111)555-1234</strong></a></li>
  <li class="info"><a href="mailto:email@yoursite.com">Email &nbsp;<strong>email@yoursite.com</strong></a></li>
</ul>

只需将它们放在同一行，并添加一个额外的空格：