html - 如何将按钮放在同一行，居中且彼此之间不要太靠近？

我有2个按钮：


下载
编辑


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

截至目前，我所拥有的



我尝试给他们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>

我应该怎么做才能接近自己想要的东西？

最佳答案

您有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>

关于html - 如何将按钮放在同一行，居中且彼此之间不要太靠近？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27486808/