如何在行内块按钮之间创建空间？答案

【问题标题】：How to create space between inline-block buttons?如何在行内块按钮之间创建空间？
【发布时间】：2023-03-30 03:25:01
【问题描述】：

我对此很陌生，对于任何滥用词汇的行为，我深表歉意。我想在两个按钮之间有一个空格，它们有一个内联块显示。 “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;
}

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>

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

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

【问题讨论】：

→
re:jgetner 谢谢，但这并没有改变任何东西。 :(
我们可以看到问题的代码 sn-p 或 codepen 吗？您是否尝试过使用填充？

标签： html css tumblr

【解决方案1】：

这里有 3 个在这种情况下会添加空格的示例：

在链接之间使用&nbsp; 代码

链接#1（a href ...）

&nbsp; &nbsp; &nbsp; &nbsp;

链接#2（a href ...）

2。使用空的<span class="spacing"></span>

'spacing'可以在css中定义为：

.spacing {
    padding-right: 20px;
}

3.调整<a>标签的padding-right属性

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

【讨论】：

No.3 是正确的方法，我实际上不推荐其他两种方法。

【解决方案2】：

在 li 上设置 padding:left 或 padding:right 应该可以工作

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

【讨论】：

【解决方案3】：

需要在UL标签上设置padding:0，anchor标签定义display:inline-block和根据需要设置填充，因此请检查下面的 sn-p。

.pagination{
  background:#155484;
  padding: 0;
  margin: 0;
  border: 2px solid #155484;
  border-radius:3px;
  position: relative;
  display: inline-block;
}
.pagination li{
  display: inline-block;
  list-style-type: none;
}
.pagination a{
  color: #fff;
  border-radius:3px;
  display: inline-block;
  padding: 8px 12px;
  text-decoration:none;
  background: #155484;
}
.pagination a:hover, .pagination a.current{
  background: #fff;
  color: #155484;
}

<ul class="pagination">
  <li><a href="#">Prev</a></li>
  <li><a href="#" class="current">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">Next</a></li>
</ul>

【讨论】：

【解决方案4】：

CSS：

.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;
}

HTML：

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

【讨论】：