gpt4 book ai didi

html - 为什么内联显示不工作?

转载 作者:行者123 更新时间:2023-11-27 23:46:51 25 4
gpt4 key购买 nike

我这里的情况真的很奇怪。在过去的 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>

参见 https://jsfiddle.net/t0z2p9bn/1/

关于html - 为什么内联显示不工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29482487/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com