如何将按钮放在同一行，中心，而不是彼此太靠近？

Question

我有两个按钮：

• 下载
• 修改

我想将它们放在同一条线上，并排放置，但也不要太远。

目前我所拥有的

我尝试给他们上课pull-left和pull-right 这就是他们的成就

他们离得太远了。 ：（

我希望他们看起来像这样。 可能，中间有垂直线。 我不知道该怎么做。

这是我的HTML代码

<p>
    <span>
        <a class="btn-1" href="/marketing_materials/{{$marketing_material->id}}/download/media_path">
            Download
        </a>
    </span>
</p>
<p>
    <span>
        <a class="btn-2" href="{{ URL::to('marketing_materials/'.$marketing_material->id.'/edit') }}">
            Edit
        </a>
    </span>
</p>

我该怎样做才能接近我想要的东西？

Answer 1

• 您有2个<p>个标签，将它们合并为1个。
• 将它们放在相同的<p>标记中，以便它们与您想要的位置相同。
• 将style="text-align:center;"添加到您的<p>代码中。
• 在它们之间添加一堆 以维护空格
• 对于垂直管道，只需执行此操作 | 
即可

试试这个

<p style="text-align:center;">
    <span>
        <a class="btn-1 pull" href="/marketing_materials/{{$marketing_material->id}}/download/media_path">
            Download
        </a>
    </span>
    &nbsp;&nbsp;&nbsp;
    <span>
        <a class="btn-2" href="{{ URL::to('marketing_materials/'.$marketing_material->id.'/edit') }}">
            Edit
        </a>
    </span>
</p>

Answer 2

在<p>示例：<p class="some-name">

上提供课程

将.some-name { display: inline-block; }放入样式表。

我还建议使用更好的语义来创建按钮。

Answer 3

用容器包裹p标签，然后您可以添加display: inline-block和margin。的 JSFIDDLE

<div class="buttons">

    <p>
        <span>
            <a class="btn-1 pull" href="#">
                Download
            </a>
        </span>
    </p>
    <p>
        <span>
            <a class="btn-2" href="#">
                Edit
            </a>
        </span>
    </p>

</div>

CSS

div.buttons p {display: inline-block;}
div.buttons p:last-child {margin-left: 20px;}