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

Posted 2023-03-27

【中文标题】标签宽度问题内的单选按钮

【英文标题】：Radio button inside label width issue

【发布时间】：2017-01-05 00:25:52

【问题描述】：

我有自定义单选按钮，我尝试在一行中显示多个单选按钮。目前，我的代码工作正常，但我的问题是我正在为标签添加固定宽度，在我的情况下是 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

【参考方案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>

【讨论】：

你能具体说明你改变了什么吗？

【参考方案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>

我确实做了一些调整

【讨论】：

我喜欢这个解决方案...这里唯一的问题是我需要 标签内的 txt。不过，我不必在那里有内部 span 标签。

【参考方案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 相。

【讨论】：

我的问题是我需要 标签内的 txt。我不必在那里有内部跨度标签