在 div 中的两个超链接之间制作 space

Question

我在 div 标签中有两个超链接，我想在这两个超链接之间创建一个 space

我该怎么做？

.btn-filter {
  background-color: #ffffff;
  font-size: 14px;
  outline: none;
  cursor: pointer;
  height: 40px !important;
  width: 110px !important;
  border: 1px solid #ccc;
  vertical-align: middle;
  display: table-cell;
  margin-left: 10px !important;
}

.btn-filter>a {
  color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="d-inline">
  <div class="btn-filter  w-50">
    <a asp-controller="" asp-action="" class="">0-2</a>
  </div>
  <div class="btn-filter w-50">
    <a asp-controller="" asp-action="" class="">3-5 </a>
  </div>
</div>

Answer 1

这是一种方法。例如，我删除了 w-50 和 table-cell 部分。在不了解您的具体情况的情况下，除了在父级 div 中添加边距之外，我很难准确地向您展示您想要什么，但希望您能理解它是如何工作的以及一些 bootstrap 类并不总是被使用（两个项目上的 50% 宽度达到 100%，因此可以使用的 space 之间是 0%。）请参阅下面的示例。

.btn-filter {
  background-color: #ffffff;
  font-size: 14px;
  outline: none;
  cursor: pointer;
  border: 1px solid #ccc;
  vertical-align: middle;
  width:100px;
  float:left;
  margin-right:50px

}

.btn-filter>a {
  color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  margin:10px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div>
  <div class="btn-filter">
    <a asp-controller="" asp-action="" class="">0-2</a>
  </div>

  <div class="btn-filter">
    <a asp-controller="" asp-action="" class="">3-5 </a>
  </div>
</div>

Answer 2

我喜欢使用基于列的方法，您可以在 children 上添加 left/right 边距，然后在 parent 上使用负间距以保持左对齐：

.btn-filter-wrap {
  padding-left: 10px;
  padding-right: 10px;
}

.btn-filter-inner {
  margin-left: -10px;
  margin-right: -10px;
}

.btn-filter {
  margin-left: 10px;
  margin-right: 10px;
}

然后您可以将此 .btn-filter-wrap class 添加到您的 .d-inline 元素，然后删除此 .d-inline class。内联显示属性更适用于文本和图像。如果您想更改间距，只需确保您的更新在 parent 和 child 边距属性之间保持一致。

编辑：

我现在注意到您还试图在 child 项目上使用“显示：table-cell”。删除它并坚持弯曲。如果要显示 table.

，最好更新所有内容以使用 <table> 元素

.btn-filter-wrap {
/* Potential side gutter spacing */
/*
  padding-left: 10px;
  padding-right: 10px;
*/

  overflow: hidden;
}

.btn-filter-inner {
  margin-left: -10px;
  margin-right: -10px;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-filter {
  background-color: #ffffff;
  font-size: 14px;
  outline: none;
  border: 1px solid #ccc;
  margin-left: 10px;
  margin-right: 10px;
  
  height: 40px;
  width: 110px;
}

.btn-filter>a {
  color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  cursor: pointer;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="btn-filter-wrap">
  <div class="btn-filter-inner">
    <div class="btn-filter">
      <a asp-controller="" asp-action="" class="">0-2</a>
    </div>
    <div class="btn-filter">
      <a asp-controller="" asp-action="" class="">3-5 </a>
    </div>
  </div>
</div>

在 div 中的两个超链接之间制作 space

making space between two hyperlinks in div

html

css

bootstrap-4