Question

正如您所见，<p>代码元素和<a>代码元素不是inline。 <a>标记元素略高于<p>。

是否有一种简单的方法可以使它们内嵌。我可以通过更改 CSS 来实现。但我觉得它并不整洁。

Answer 1

通过设置<p>和<a>标记的填充和边距，您将确保它们不会使用继承值和默认值。之后，您可以简单地让它们左右浮动。这是css：

#inboxHeader{
   background-color:yellow;
   overflow:hidden;
}
#inboxCount p, #inboxNewMessage a{
    margin: 0px;
    padding: 0px;
}

#inboxCount{
   float: left;
}
#inboxNewMessage{
   float: right;
}

这是fiddle

Answer 2

段落具有默认的用户代理样式表边距集：

p {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

只需添加一个

p, a {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

通过这种方式，您可以将它们的边距设置在一起，或者为段落

定义默认值

Answer 3

您需要在margin:0内的p上设置div。这是浏览器默认添加的。然后使用line-height为您提供您想要的垂直对齐方式。

以下是更新后的fiddle。

如何制作<p>标签和<a> tag inside a </a> </p> <div> <a> inline</a> </div>

3 个答案: