我这里遇到了一个非常奇怪的情况。我花了过去 7 个小时研究为什么我无法让 display: inline; 工作，除非它在我的主页上。似乎没有什么帮助。
这是相关的编码。
<!DOCTYPE html>
<html>
<head>
<title>Contact Info</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="name">
<p>*****<p>
<a href="index.html">Go Back</a>
</div>
<div class="contact">
<p>
<span style="color:#000000">By Phone:</span>
<a href="tel:*******">**********</a>
</p>
<p>
<span style="color:#000000">By Email:</span>
<a href="mailto:****@***.ca">****@****.ca</a>
</p>
<p>
<span style="color:#000000">By Mail:</span>
<span style="color:#3300cc">***************</span>
</p>
</div>
</body>
这是 CSS。
.name {
display: inline;
}
结果是两个元素(名称“****”和“返回”链接)彼此叠置。我曾尝试将其列为 list ，但没有效果。我尝试将它们都链接起来，但这没有效果。 display: inline-block; 也没有效果。我所做的任何事情都不会影响 div 类名。我尝试多次更改div类的名称没有效果。
最佳答案
这里的问题是<p>标签也是 block 级元素。一种解决方案是添加一种样式，例如 <p> .name内div 也是内联的
.name, .name p {display: inline;}
参见https://jsfiddle.net/t0z2p9bn/
最好更改您的 html，使星星不包含在 <p> 中。标签
<div class ="name">
*****
<a href="index.html">Go Back</a>
</div>
关于html - 为什么显示内联不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29482487/