css 将一项放在中间，一项放在末尾[重复]

gr8qqesn 于 2023-02-26 发布在其他

关注(0)|答案(3)|浏览(161)

- 此问题在此处已有答案**：

Center one and right/left align other flexbox element（11个答案）
3天前关闭。
我有一个有3列的css网格。每列包含一个标题和一个复选框。我希望标题在列的"真正"中心，复选框在列的末尾。但是，列的宽度可能会改变，所以我不能静态地添加一个空白的复选框。
我有这个：

我想要这个：

我试着设置复选框position: absolute，这样文本就可以很容易地居中，因为复选框的宽度被忽略了，但是这需要我用javascript获得列的宽度，并通过编程设置复选框的边距，这样它总是出现在最后。
是否有更好的/仅css的方法来实现这一点？
最小示例：

<div className="grid grid-cols-3">
  <div>
    <span>Plannable</span>
    <input type="checkbox" />
  </div>

  <div>
    <span>Archive</span>
    <input type="checkbox" />
  </div>

  <div>
    <span>Export</span>
    <input type="checkbox" />
  </div>
</div>

css

来源：https://stackoverflow.com/questions/75532518/place-one-item-in-center-one-at-the-end

3条答案

按热度按时间

wa7juj8i1#

整个场景不是很清楚，因为你分享了一个非常基本的html，与图片并不完全匹配，而且也没有提到使用了什么风格（可能是tailwind）。
要使span居中，您可以将其容器设置为display: flex，设置其position: relative将允许您将其复选框绝对定位在其最右侧。
这是一个例子：

.grid{
  display: grid;
}

.grid-cols-3{
  grid-template-columns: 1fr 1fr 1fr;  
}

.grid > div {
  border: solid 1px;
  background: lightgray;
  
  /*centering content both horizontally and vertically*/
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*position the checkbox at the far right of its container*/
.grid > div input {
  position: absolute;
  right: 0;
}

<div class="grid grid-cols-3">
   <div>
      <span>Plannable</span>
      <input type="checkbox"/>
   </div>

   <div>
      <span>Archive</span>
      <input type="checkbox"/>
   </div>

   <div>
      <span>Export</span>
      <input type="checkbox"/>
   </div>
</div>

赞(0）回复(0）举报 2023-02-26

4xrmg8kj2#

一种可能的方法是将float: right应用于input元素，并将text-align: center应用于其父元素，这也需要将margin: 0应用于input（至少对于顶部和底部边距），以避免它们重叠到下一行：

.grid input {
  float: right;
  margin: 0;
}

.grid>div {
  text-align: center;
}

<div class="grid grid-cols-3">
  <div>
    <span>Plannable</span>
    <input type="checkbox" />
  </div>

  <div>
    <span>Archive</span>
    <input type="checkbox" />
  </div>

  <div>
    <span>Export</span>
    <input type="checkbox" />
  </div>
</div>

赞(0）回复(0）举报 2023-02-26

xeufq47z3#

您可以尝试使用Bootstrap 5执行以下操作：

<div class="row">
  <div class="col-sm-4">
    <div class="col-sm-11">
      Planable
    </div>
    <div class="col-sm-1">
      <input type="checkbox" />
    </div>
  </div>
  <div class="col-sm-4">
    <div class="col-sm-11">
      Archieve
    </div>
    <div class="col-sm-1">
      <input type="checkbox" />
    </div>
  </div>
  <div class="col-sm-4">
    <div class="col-sm-11">
      Export
    </div>
    <div class="col-sm-1">
      <input type="checkbox" />
    </div>
  </div>
</div>

这就是你可以用来让复选框真正放在最后而不会有任何问题的主要概念。如果你需要B5 CDN文件，这里有：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>

赞(0）回复(0）举报 2023-02-26

我来回答

css 将一项放在中间，一项放在末尾[重复]

3条答案

相关问题

热门标签

最新问答