Question

我在这里遇到了一个非常奇怪的情况。我花了最后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;
}

结果是两个项目（名称＆＃34; ****＆＃34;以及＆＃34;返回＆＃34;链接），彼此重叠显示。我试过把它作为一个列表，但这没有效果。我试过让它们成为两个链接，但这没有效果。 display: inline-block;也没有效果。我所做的一切对div类名都没有影响。我尝试多次更改div类的名称没有效果。

Answer 1

这里的问题是<p>标记也是块级元素。一种解决方案是添加样式，使<p> div中的.name也内联

.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/

Answer 2

div s不应用于内联元素。您的意思是使用 span ？
有一个错字 - 它不应该有所作为，但是＆＃34; class＆＃34;之后有一个不需要的空间。这里：

<div class ="name">

为什么不显示内联工作？

2 个答案: