如何在 html 中内联 p 和 a 标记？答案

【问题标题】：How do I put a p and an a tag inline in html?如何在 html 中内联 p 和 a 标记？
【发布时间】：2018-03-11 23:29:41
【问题描述】：

我试图将<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>

【问题讨论】：

标签： html css inline display

【解决方案1】：

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

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

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

header p {
  display: inline-block;
}

编辑：基于进一步的 cmets，这是您正在寻找的解决方案。

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

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

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

首先，我已将您的 header 文本居中对齐。这使新的h1 元素居中。此外，我设置了position: relative，因为我们将在下一步中使用它。

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

第二，为了将您的菜单定位到屏幕右侧，我使用position: absolute 将其从常规内容流中移除。现在，通过指定top 或bottom 和 left 或right，我们可以将菜单定位在标题中的任何位置。为什么是标题？因为它是距离nav 最近的父级，具有relative 位置。这就是我们提前设置它的原因！

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

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

【讨论】：

谢谢，这几乎就是我想要的。但是如何将 SaHa 徽标放回中心并将“菜单”移到右侧？
查看this Codepen。如果这是您正在寻找的内容，我很乐意更新我的答案并更详细地解释我所做的事情。
我仍然对您如何将“SaHa”定位在中心感到有些困惑，但导航元素位于右侧。
我已经更新了我的答案来解释这一点。希望通俗易懂！
对不起，我对 codepen 不熟悉，但你能给我发一个新链接吗？我认为它没有更新。

【解决方案2】：

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

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

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

例如：

一个 {display:inline-block;}

【讨论】：