将链接放在html中的一行

Question

我有以下代码，链接出现在不同的行上。我如何将它们放在网页上的一行上-

 <p><a href="new.php">Add a new record</a></p>
<p><a href="view.php">View, Edit or Delete Existing Records</a></p>
<p><a href="index.html">Go to Home Page</a></p>

原文由 Aditya Dev 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您无法更改 html，一种方法是将 display: inline 添加到您的 <p> 标签中。

 p {
  display: inline;
}

 <p><a href="new.php">Add a new record</a></p>
<p><a href="view.php">View, Edit or Delete Existing Records</a></p>
<p><a href="index.html">Go to Home Page</a></p>

或者，如果您需要执行指定高度或宽度之类的操作， display: inline-block 就是答案。

 p {
  display: inline-block;
  height: 50px;
  background: grey;
}

 <p><a href="new.php">Add a new record</a></p>
<p><a href="view.php">View, Edit or Delete Existing Records</a></p>
<p><a href="index.html">Go to Home Page</a></p>

但是，如果您希望它们内联，我不会将每个链接都放在它自己的段落中，因为这不是好的做法。去掉 <p> 标签，如下：

 <a href="new.php">Add a new record</a>
<a href="view.php">View, Edit or Delete Existing Records</a>
<a href="index.html">Go to Home Page</a>

原文由 CalvT 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

尽管可以按照您使用 p 标记的方式进行操作，但我建议使用 ul 然后 li

 li
{
  display:inline-block;
}

 <ul>
  <li><a href="new.php">Add a new record</a></li>
  <li><a href="view.php">View, Edit or Delete Existing Records</a></li>
  <li><a href="index.html">Go to Home Page</a></li>
</ul>

原文由 wegelagerer 发布，翻译遵循 CC BY-SA 3.0 许可协议