如何在 html 中内嵌 p 和 a 标签？

Question

我正在尝试将 <p> 标记与 <a> 标记内联，但我不知道该怎么做。我在 css 中尝试了几种显示类型，但它们要么不起作用，要么对它做了一些奇怪的事情。

（这里有一堆不必要的词，因为事情是说代码太多而词不够。我认为它很愚蠢，因为我说的已经足够了，除非有人专门询问某些事情的细节）。

下面是一些示例代码：

body {
 margin: 0;
 padding: 0;
 background-color: #efefef;
}

header {
 margin: 0;
 margin-top: -10px;
 background-color: #ffffff;
}

header p {
 margin: 0;
 font-family: "arial";
 font-size: 50px;
 color: #3c3c3c;
 margin-top: 10px;
 margin-left: 10px;
 text-align: center;
}

header a {
}

#information {
 width: 500px;
 height: 250px;
 background-color: #ffffff;
 box-shadow: 7px 7px 4px grey;
 margin-left: 100px;
 margin-top: 150px;
}

#information p {
 font-family: "arial";
 font-size: 20px;
 color: #1febff;
}

#delete {
 margin-top: 2000px;
}

<!DOCTYPE html>
<html>
<head>
 <title>SaHa | Color Scheme</title>
 <link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>

 <header>
  <p>SaHa</p>

  <a href="#">Menu</a>
 </header>

 <div id="information">
  <p>Pretend that there is a bunch of important information here even though there really isn't.
     This is normally where a message that actually means something would go, but this is just a
     placeholder because I have nothing important to put here right now.
  </p>
 </div>

 <div id="delete"></div>

</body>
</html>

Answer 1

您能否在示例代码中指定要内联的元素？

通常使用 display: inline 和 display: inline-block 会使元素像文本一样流动。当它们的容器宽度太窄时，它们将并排坐下并跳到新行。浏览器通常将 display: block 应用于 <p> 元素 by default.

假设我们正在谈论您的 <header> 的内容，我将以下规则添加到您现有的 CSS。检查一下 in action.

header p {
  display: inline-block;
}

编辑： 根据进一步的评论，这是您正在寻找的解决方案。

首先，我将您的菜单项包装在 nav 元素中，并将您的主标题设为 h1 元素。搜索引擎更喜欢这样。默认情况下，h1 元素也内嵌显示，并遵循其 parent 容器（在本例中为 header）的 text-align 属性。

<h1>SaHa</h1>
<nav>
  <a href="#">Menu</a>
  <a href="#">Thing</a>
  <a href="#">Stuff</a>
</nav>

在 CSS 方面，我做了两个重要的改变。

首先，我center-aligned你的header文本。这使新的 h1 元素居中。此外，我设置了 position: relative，因为我们将在下一步中需要它。

header {
  text-align: center;
  position: relative;
}

第二个，为了将菜单放置在屏幕的右侧，我用 position: absolute 将其从常规内容流中移除。现在，通过指定 top 或 bottom 和 left 或 right，我们可以将菜单定位在 header。为什么 header？因为它是最近的 parent 到 nav 的 relative 位置。这就是为什么我们设置得更早！

nav {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

尝试更改 this Codepen example 中 right 和 bottom 的值。尝试将 right 更改为 left，看看会发生什么。如果从 .header 中删除 position: relative 会怎样？

Answer 2

在您的 HTML 中，尝试直接键入或
在您希望它显示的任何文本之后。

例如：<div>When i came<a> ut yiur name</a>so what do i do</div>

在您的 CSS 正文中，尝试内联块或仅使用 DISPLAY 内联参数属性将任何图像或文本放入正常的行流中。

例如：

一个{显示：内联块；}

如何在 html 中内嵌 p 和 a 标签？

How do I put a p and an a tag inline in html?

html

css

inline

display