将链接放在 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>

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>

但是，如果您希望它们内联，我不会将每个 link 放在它自己的段落中，因为这不是好的做法。去掉<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>

Answer 2

删除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>

Answer 3

尽管可以按照使用 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>

Answer 4

试试这个

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

Answer 5

您也可以使用 display:inline-block 来完成。因为 inline 元素不能设置宽度和高度，但是 inline-block 元素尊重高度和宽度，尊重顶部和底部边距和填充。

a {
  display: inline-block;
}

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

Answer 6

P 标签是块级元素，所以它会占据全角，所以如果你需要在一行中使用它，那么你可以为 p 标签添加 css display:inline-block .

单行导航的最佳方式：

您可以在 p 标签上使用 ul 代替：

<ul>
    <li><a href"#">test</a></li>
    <li><a href"#">test</a></li>
    <li><a href"#">test</a></li>
</ul>

Css 以上 HTML:

li{display:inline-block}

Answer 7

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

<p> 标签创建了一个新段落，因此如果您希望链接出现在一行中，您只需要去掉它们

将链接放在 html 中的一行

Placing links on one line in html

html

css