标签宽度问题内的单选按钮

Question

我有自定义单选按钮，我尝试在一行中显示多个单选按钮。目前，我的代码工作正常，但我的问题是我正在为标签添加固定宽度，在我的情况下是 width:50px;。

如果我的文字较长...我的文字与下一个单选按钮重叠。有没有办法避免固定宽度？像 calc() 这样的函数似乎对我的情况没有帮助。

我也试过只使用min-width 而不是width。

* {
  box-sizing: border-box;
}
input[type="radio"] {
  display: none;
  cursor: pointer;
}
label {
  cursor: pointer;
  display: inline-block;
  width: 50px;
  position: relative;
}
.radio span.custom > span {
  margin-left: 22px;
}
.radio .custom {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  display: inline-block;
  height: 20px;
  left: 0;
  position: absolute;
  top: 0;
  width: 20px;
}
.radio input:checked + .custom:after {
  background-color: #0574ac;
  border-radius: 100%;
  border: 3px solid #fff;
  content: "";
  display: block;
  height: 12px;
  position: absolute;
  top: 0;
  width: 12px;
}
.radio input + .custom {
  border-radius: 100%;
}
.checkbox input:checked .custom {
  background-color: blue;
  border-color: blue;
}

<label class="radio">
  <input type="radio">
  <span class="custom"><span>One</span></span>
</label>

更新：

我需要将文本放在<span class="custom"> 标记内。我不必在那里有内部跨度标签

JSFiddle Demo

Answer 1

尝试使用:after 伪元素来构造圆形单选按钮。并将.custom 更改为display: inline，使其占据内容宽度。还要将white-space: nowrap 添加到跨度中，以便它占据整个文本宽度而不会中断。

* {
  box-sizing: border-box;
}

input[type="radio"] {
  display: none;
  cursor: pointer;
}

label {
  cursor: pointer;
  min-width: 50px;
  display:inline-block;
  position:relative;
}

.radio span.custom > span {
  margin-left: 24px;
  margin-right: 10px;
  display: inline-block;
  white-space: nowrap;
  line-height: 22px;
}

.radio .custom {  
  display: inline;
}

.radio .custom:after{ 
  content: '';
  height: 20px;
  left: 0;
  top: 0;
  width: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  position: absolute;
}

.radio input:checked + .custom:before {
    background-color: #0574ac;
    border-radius: 100%;
    border: 3px solid #fff;
    content: "";
    display: block;
    height: 12px;
    position: absolute;
    top: 2px;
    width: 12px;
    z-index: 1;
    left: 2px;
}

.radio input + .custom:after {
  border-radius: 100%;
}

.checkbox input:checked .custom {
  background-color: blue;
  border-color: blue;
}

<label class="radio">
  <input type="radio">
  <span class="custom"><span>One</span></span>
</label>

<label class="radio">
  <input type="radio">
  <span class="custom"><span>Two (longer text)</span></span>
</label>

<label class="radio">
  <input type="radio">
  <span class="custom"><span>Three (another longer text)</span></span>
</label>

<label class="radio">
  <input type="radio">
  <span class="custom"><span>Four</span></span>
</label>

Answer 2

我认为从 html 的结构开始，这里出现了很多问题。首先，您有两个不必要的嵌套span 元素，其中外部span 限制了内部span 的宽度。

就我个人而言，我会去掉内部的 span 元素，以使用更简单的 css 让您的生活更轻松。然后，我会摆脱所有不需要的绝对和相对定位

见下例

* {
  box-sizing: border-box;
}
input[type="radio"] {
  display: none;
  cursor: pointer;
}
label {
  cursor: pointer;
  display: inline-block;
}
.radio span.custom > span {
  margin-left: 22px;
}
.radio .custom {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  display: inline-block;
  height: 18px;
  left: 0;
  top: 0;
  width: 18px;
  vertical-align: middle;
  padding: 2px;
}
.radio input:checked + .custom:after {
  background-color: #0574ac;
  border-radius: 100%;
  content: "";
  display: block;
  height: 12px;
  width: 12px;
}
.radio input + .custom {
  border-radius: 100%;
}
.checkbox input:checked .custom {
  background-color: blue;
  border-color: blue;
}

<label class="radio">
  <input type="radio">
  <span class="custom"></span>
  A veeeeeeeeeeeeeeeeeeeeeeery loooooooooooooong text for this button
</label>

<label class="radio">
  <input type="radio">
  <span class="custom"></span>
  Two
</label>

我确实做了一些调整

Answer 3

我重新排列了您的代码。这是你想要的吗？

JSFiddle : https://jsfiddle.net/fz5vhwtx/5/

我删除了所有绝对位置，因为它的宽度不计入标签中。它是浮动的，我将其更改为 flex 布局。试试看吧。

HTML

<div class="radio-holder">
  <label class="radio">
    <input type="radio" name="radio">
    <span class="custom"></span>
    <p>One</p>
  </label>

  <label class="radio">
    <input type="radio" name="radio">
    <span class="custom"></span>
    <p>Two</p>
  </label>

  <label class="radio">
    <input type="radio" name="radio">
    <span class="custom"></span>
    <p>One Hundred</p>
  </label>
</div>

CSS

* {
  box-sizing: border-box;
}

input[type="radio"] {
  display: none;
  cursor: pointer;
}

.radio-holder {
  display: flex;
}

label {
  cursor: pointer;
  display: flex;
  align-items: center;
  position:relative;
  margin-right: 20px;
}

.radio .custom {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  display: inline-block;
  height: 20px;
  width: 20px;
  margin-right: 3px;
}

.radio input:checked + .custom:after {
  background-color: #0574ac;
  border-radius: 100%;
  border: 3px solid #fff;
  content: "";
  display: block;
  height: 12px;
  top: 0;
  width: 12px;
}

.radio input + .custom {
  border-radius: 100%;
}

.checkbox input:checked .custom {
  background-color: blue;
  border-color: blue;
}

希望对您有所帮助。 Selamat 相。