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

尝试使用:after伪元素构建圆角单选按钮。并将.custom更改为display: inline，以便占用内容宽度。还要按顺序将white-space: nowrap添加到范围内，以便在不中断的情况下获取文本的整个宽度。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我认为从html的结构开始出现了很多问题。首先，你有两个不必要的嵌套span元素，其中outter 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 siang。

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

3 个答案: