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

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"> 标签内。不过，我不必在那里放置内部 span 标签

JSFiddle Demo

Answer 1

我认为从 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 2

我重新整理了你的代码。这是你想要的吗？

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

希望对你有帮助。大家好.

Answer 3

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

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

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

Radio button inside label width issue

html

css

styles

radio