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

时间:2014-04-01 17:30:16

标签: html css

我有this html code

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

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

3 个答案:

答案 0 :(得分:3)

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

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

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

这是fiddle

答案 1 :(得分: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;
}

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

定义默认值

答案 2 :(得分:1)

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

以下是更新后的fiddle