在下面的代码片段中,我有工具名称和同一行的一个单选按钮,但尽管我给出了space-between,但单选按钮并不在最后.

如何将单选按钮与右侧末端对齐,就像space-between正常工作一样

.container-section-column-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

input[type='radio'] {
  display: none;
}

label {
  cursor: pointer;
  position: relative;
  font-size: 4rem;
}

label::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: transparent;
  border: 2px solid grey;
  border-radius: 50%;
  top: 50%;
  left: -5rem;
  transform: translateY(-50%);
  transition: border-color 400ms ease;
}

label::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: red;
  border: 2px solid red;
  border-radius: 50%;
  top: 50%;
  left: -5rem;
  transform: translateY(-50%) scale(0);
  transition: transform 400ms ease;
}

input[type='radio']:checked+label::before {
  border-color: red;
}

input[type='radio']:checked+label::after {
  transform: translateY(-50%) scale(0.55);
}
<div class='container-section'>
  <div class='container-section-column-wrapper'>
    <div class='column-one'>
      <div class='tool-name'>Tool one</div>
    </div>
    <div class='column-two'>
      <input type='radio' id='tool-one' name='tool-pick-group' />
      <label for='tool-one' />
    </div>
  </div>

推荐答案

这是因为伪元素:before:after绝对位于相对位置的父元素(label)中.您正在指定left: -5rem;,以try 向后再向左对齐,这将导致您看到的间距.相反,只需使用right: 0;即可.

.container-section-column-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

input[type='radio'] {
  display: none;
}

label {
  cursor: pointer;
  position: relative;
  font-size: 4rem;
}

label::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: transparent;
  border: 2px solid grey;
  border-radius: 50%;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  transition: border-color 400ms ease;
}

label::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: red;
  border: 2px solid red;
  border-radius: 50%;
  top: 50%;
  right: 0;
  transform: translateY(-50%) scale(0);
  transition: transform 400ms ease;
}

input[type='radio']:checked+label::before {
  border-color: red;
}

input[type='radio']:checked+label::after {
  transform: translateY(-50%) scale(0.55);
}
<div class='container-section'>
  <div class='container-section-column-wrapper'>
    <div class='column-one'>
      <div class='tool-name'>Tool one</div>
    </div>
    <div class='column-two'>
      <input type='radio' id='tool-one' name='tool-pick-group' />
      <label for='tool-one' />
    </div>
  </div>

Html相关问答推荐

我需要主页按钮出现在中间

如何使我的组织 struct 图的连接线响应?

悬停效果在新西兰表上不起作用

粘滞的导航栏延伸到超过页边距的右侧

在一行中对齐文本和图标

如何在将文本垂直居中的同时将文本右对齐?

如何创建带有粘性列和标题的网格?

如何保持嵌套进度条的背景色?

在弹性框布局中的第n个元素后强制换行

carousel 的垂直滚动按钮居中

图像如何能达到 HTML 表格的全宽?

如何用js和CSS在两点之间画一条线

如何使Bootstrap 5卡可点击

Github上部署需要花费几小时时间:等待github pages部署批准

如何使用CSS Select 同级元素的::before伪元素?

如何使背景 colored颜色 逐渐渐变成另一种 colored颜色 ?

如何使容器的大小适合其 position:absolute; 子元素的大小

如何使文本区域自动扩展到最大高度?

无法从社交栏中 Select 选项

如何将图像高度设置为等于文本高度?