html - 该框不起作用(html/css)

Closed. This question is off-topic。它当前不接受答案。












                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。

                        4年前关闭。



那么谁能说出我的代码出了什么问题？因此，我尝试添加一个蓝色虚线的“块”，但是为什么它没有显示（似乎字体已更改，但该框仍然没有出现）。之前我也遇到过类似的问题，但是这次我不知道怎么了。我在某处缺少分号还是写错了什么？

当我在JSFiddle中启动代码时，它似乎可以正常工作，但是当我使用.html文件打开SAME代码时，一切似乎仍然不起作用（图片：http://i.imgur.com/VT7vR3m.png）。我有谁知道为什么（css文件在正确的位置）？

https://jsfiddle.net/j31dgz70/1/

#info {
  color: blue;
  background: silver;
}

.welcome {
  color: purple;
  font-size: 20px;
  background-color: aqua;
  text-shadow: 1px 1px silver;
}

#tab {
  background-color: blue;
}

code {
  font-family:"Comic Sans MS", cursive, sans-serif;
  display: inline-block;
  height: 20px;
  width: auto;
  padding: 2px;
  margin: 4px;
  background-color: #7FECFF;
  text-align: center;
}

.box {
  border: 1px dashed #540CE8;
}

<!DOCTYPE html>
<body>
  <p id="tab"><b>About page</b>

  </p>
  <article>
    <code class="box">
      Contact: <a href="mailto:[email protected]">Email me</a>
    </code>

    <a href="index.html"><br>Return to homepage.</a>

  </article>
</body>

最佳答案

是导致问题的<br/>。

它会强制换行，但高度会限制可见的内容。

删除中断标签。如果要间隔，请使用边距或填充...这就是它们的用途。

    code {
      font-family: "Comic Sans MS", cursive, sans-serif;
      display: inline-block height: 20px;
      padding: 2px;
      margin: 4px;
      background-color: #7FECFF;
      text-align: center;
    }
    .box {
      border: 1px dashed #540CE8;
    }

<code class="box">
Contact: <a href="mailto:[email protected]">Email me</a>
</code>

<code class="box">
    Contact: <a href="mailto:[email protected]">Email me<br/></a>
</code>

如果您希望“框”有两行，则为“备用选项”

选项1：保留break标签，然后移动它。（不是最佳，但还可以）

    code {
      font-family: "Comic Sans MS", cursive, sans-serif;
      display: inline-block;
      padding: 2px;
      margin: 4px;
      background-color: #7FECFF;
      text-align: center;
    }
    .box {
      border: 1px dashed #540CE8;
    }

<code class="box">
    Contact: <br/><a href="mailto:[email protected]">Email me</a>
</code>

选项2：将链接设为阻止

    code {
      font-family: "Comic Sans MS", cursive, sans-serif;
      display: inline-block;
      padding: 2px;
      margin: 4px;
      background-color: #7FECFF;
      text-align: center;
    }
    .box {
      border: 1px dashed #540CE8;
    }
    .box a {
      display: block;
    }

<code class="box">
    Contact: <a href="mailto:[email protected]">Email me</a>
</code>