Question

我无法弄清楚如何对齐这三个元素。我有这个计划：

<div class="main_box">
    <span class="title">Title</span>
    <p>Text goes here</p>
    <a class="button" href="#">Button</a>
</div>

CSS是：

.title{
float:left;
display:inline-block;
}

p{
display: inline;
float: left;
width:100px;
}

.button{
display: inline;
float: right;
}

我将宽度放在p上，因为它的宽度是容器的宽度（我不想要）。

这样，按钮（锚）就与段落对齐，但是我想把它放在更多位置，介于标题和段落之间。

我做错了什么？：\我应该在锚点上使用负边距吗？

编辑：我不够清楚，我需要垂直对齐这些元素。我已经弄明白了这个问题。我可以使用负边距。

Answer 1

我不确定你到底想要什么，但我认为它是这样的：

您可以将<p>的宽度更改为适当的宽度！

Answer 2

＆＃39; P＆＃39;有一个保证金尝试：

p {     margin: 0;

Answer 3

更新您的CSS，如下所示。

.title{
float:left;
}

p{
float:left;
width:100px;
padding:0;
margin:0;
}
.button{
float:right;
}

Answer 4

您可以在此使用display: inline-block;，无需使用float

.title, p, .button{
  display: inline-block;
  vertical-align: middle;
}

p{
  width:100px; /* you can add width if you want */
}