Html 如何在内联块按钮之间创建空间？

我对这个很陌生，所以很抱歉对vocab的误用。 我希望两个按钮之间有一个空格，这两个按钮有一个内联块显示。“margin”属性没有完成我需要它做的事情

CSS:

.pagination{
    background:#155484;
    padding:20px;
    border:2px solid #155484;
    border-radius:3px;
    position:absolute;
    left:75%;
    top:75%;
}

.pagination li{
    display:inline-block;
    list-style-type:none;
}

.pagination a{
    color:#fff;
    text-decoration:none;
}

.pagination{
    position:absolute;
    right:18%;
    top:75%;
}

.pagination li{
    display:inline-block;
    list-style-type:none;
    text-align:center;
}

.pagination a{
    color:#fff;
    text-decoration:none;
    font-size:25px;
}

.back{
    background:#155484;
    padding:20px;
    border:2px solid #fff;
    border-radius:3px;
    float:left;
}

.next{
    margin-left:10px;
    background:#155484;
    padding:20px;
    border:2px solid #fff;
    border-radius:3px;
    float:right;
}    

<div class="pagination">
{block:Pagination}
            {block:PreviousPage}
                <div class="back">
                <a href="{PreviousPage}">《</a>
                </div>
            {/block:PreviousPage}
            {block:NextPage}
                <div class="next">
                <a href="{NextPage}">》</a>
                </div>
            {/block:NextPage}
        {/block:Pagination}
</div>

HTML

<div class="pagination">
{block:Pagination}
            {block:PreviousPage}
                <a href="{PreviousPage}">&larr;</a>
            {/block:PreviousPage}
            {block:NextPage}
                <a href="{NextPage}">&rarr;</a>
            {/block:NextPage}
        {/block:Pagination}
</div>

{块：分页}
{块：上一页}
{/block:PreviousPage}
{block:NextPage}
{/block:NextPage}
{/block:Pagination}

（这是使用Tumblr特定变量。）

---

还有，如果这里有什么可以更改或省略的，那就太好了

在li上设置

padding:left

或

padding:right

应该有效

.pagination li{
    display:inline-block;
    list-style-type:none;
    padding-left: 10px;
    padding-right: 10px;
}

---

需要在UL上设置填充：0标记和锚定标记定义显示：内联块并根据需要设置填充，因此请检查下面的代码段

.pagination{
背景#155484；
填充：0；
保证金：0；
边框：2个实心#155484；
边界半径：3px；
位置：相对位置；
显示：内联块；
}
李先生{
显示：内联块；
列表样式类型：无；
}
.页码a{
颜色：#fff；
边界半径：3px；
显示：内联块；
填充：8px 12px；
文字装饰：无；
背景#155484；
}
.pagination a:悬停，.pagination a.当前{
背景：#fff；
颜色：#155484；
}

以下三个示例将在此场景中添加空格：

在链接之间使用

代码

链接#1（a href…）

链接#2（a href…）

2。使用空的

“间距”可以在css中定义为：

.spacing {
    padding-right: 20px;
}

3。调整

标记的

右填充
属性

.pagination a {
    padding-right: 20px;
    // other attributes
}

CSS:

.pagination{
    background:#155484;
    padding:20px;
    border:2px solid #155484;
    border-radius:3px;
    position:absolute;
    left:75%;
    top:75%;
}

.pagination li{
    display:inline-block;
    list-style-type:none;
}

.pagination a{
    color:#fff;
    text-decoration:none;
}

.pagination{
    position:absolute;
    right:18%;
    top:75%;
}

.pagination li{
    display:inline-block;
    list-style-type:none;
    text-align:center;
}

.pagination a{
    color:#fff;
    text-decoration:none;
    font-size:25px;
}

.back{
    background:#155484;
    padding:20px;
    border:2px solid #fff;
    border-radius:3px;
    float:left;
}

.next{
    margin-left:10px;
    background:#155484;
    padding:20px;
    border:2px solid #fff;
    border-radius:3px;
    float:right;
}    

<div class="pagination">
{block:Pagination}
            {block:PreviousPage}
                <div class="back">
                <a href="{PreviousPage}">《</a>
                </div>
            {/block:PreviousPage}
            {block:NextPage}
                <div class="next">
                <a href="{NextPage}">》</a>
                </div>
            {/block:NextPage}
        {/block:Pagination}
</div>

HTML:

.pagination{
    background:#155484;
    padding:20px;
    border:2px solid #155484;
    border-radius:3px;
    position:absolute;
    left:75%;
    top:75%;
}

.pagination li{
    display:inline-block;
    list-style-type:none;
}

.pagination a{
    color:#fff;
    text-decoration:none;
}

.pagination{
    position:absolute;
    right:18%;
    top:75%;
}

.pagination li{
    display:inline-block;
    list-style-type:none;
    text-align:center;
}

.pagination a{
    color:#fff;
    text-decoration:none;
    font-size:25px;
}

.back{
    background:#155484;
    padding:20px;
    border:2px solid #fff;
    border-radius:3px;
    float:left;
}

.next{
    margin-left:10px;
    background:#155484;
    padding:20px;
    border:2px solid #fff;
    border-radius:3px;
    float:right;
}    

<div class="pagination">
{block:Pagination}
            {block:PreviousPage}
                <div class="back">
                <a href="{PreviousPage}">《</a>
                </div>
            {/block:PreviousPage}
            {block:NextPage}
                <div class="next">
                <a href="{NextPage}">》</a>
                </div>
            {/block:NextPage}
        {/block:Pagination}
</div>


{块：分页}
{块：上一页}
{/block:PreviousPage}
{block:NextPage}
{/block:NextPage}
{/block:Pagination}
re:jgetner谢谢你，但这根本没有改变任何事情：（我们可以看到这个问题的代码片段或代码笔吗？。你试过使用填充吗？第3种方法是正确的，实际上我不推荐其他两种方法。