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

＆＃13;

p {
  display: inline;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

但是，如果你想让它们内联，我不会将每个链接放在它自己的段落中，因为这不是一个好习惯。删除<p>标记，如下所示：

＆＃13;

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

＆＃13;

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>

Answer 3

<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> 标签创建了一个新段落，因此如果您希望链接出现在一行中，您只需要删除它们

Answer 4

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

试试这个

<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

您也可以使用display:inline-block执行此操作。由于inline元素不能设置宽度和高度，但inline-block元素尊重高度和宽度，因此尊重顶部和底部边距和填充。

＆＃13;

a {
  display: inline-block;
}

＆＃13;

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

＆＃13;

Answer 7

P标记是块级元素，因此它将占据整个宽度，因此如果您需要在一行中使用此标记，则可以为display:inline-block标记添加css p。

最佳导航方式：

您可以使用ul代替p代码：

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

以上HTML的Css：

li{display:inline-block}

在html中将链接放在一行上

7 个答案: