Question

我遇到了一个奇怪的问题。我正在尝试将<address>标记设置为表格单元格，但浏览器（Chrome，Chromium，Firefox）坚持将其显示为块！

以下是代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Address Test</title>
<style  type="text/css">

form {display:table;}
p {display:table-row;}
label,a,input,output,address,a {display:table-cell;border:1pt solid silver;}

</style>
</head>
<body>

<form>
<p>
    <label>Tel:</label>
    <a href="tel:+12345">+12345</a>
</p>
<p>
    <label>Fax:</label>
    <a href="tel:+12345">+12345</a>
</p>
<p>
    <label>Address:</label>
    <address>bla bla bla</address>
</p>
<p>
    <label>E-Mail:</label>
    <a href="mailto:john@smith.com">john@smith.com</a>
</p>
</form>

</body>
</html>

......这是输出：

http://richstyle.org/contact.html

请帮忙吗？

Answer 1

address个元素不能包含在p个元素中。 Chrome和Firefox将标记呈现为：

<p>
    <label></label>
</p>
<address></address>

作为HTML specification suggests，分隔符比段落标记更合适。

<div>
    <label>Address:</label>
    <address>bla bla bla</address>
</div>

div {display:table-row;}

样式地址标记作为表格单元格

1 个答案: