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

在您的HTML中，尝试直接输入或
在您想要显示的任何文字之后。

例如：*{A::new_method} = sub { say "A new method" }; $any_obj_of_A->new_method();

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

例如：

a {display：inline-block;}

Answer 2

您可以指定您想要内联的示例代码中的哪些元素吗？

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

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

header p {
  display: inline-block;
}

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

首先，我将您的菜单项包装在nav元素中，并使您的主标题成为h1元素。这样的搜索引擎更好。默认情况下，h1元素也会以内联方式显示，并且在其父容器（在本例中为text-align）中具有header属性。

<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，看看会发生什么。如果您从position: relative移除.header会怎样？

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

2 个答案: