如何保持 input:checkbox 和 a 标签在同一行？答案

【问题标题】：How do I keep an input:checkbox and an a tag on same line?如何保持 input:checkbox 和 a 标签在同一行？
【发布时间】：2018-09-24 08:05:22
【问题描述】：

我有这样的标记：

<div class="radio-choice score bottom">
  <input type="radio" name="name" value="v1" class="myradio" 
      /><a target="_blank" href="https://example.com/gudlink">Long description of a very interesting article</a>
</div>

我正在使用多列引导网格。我希望上面的 html 像这样呈现：

[] Long description of a ve

相反，我得到了这个：

[]
Long description of a very interesting article

该行保持在单行上，但超出了列边界。

两个问题：

无论长度如何，如何将文本与复选框保持在同一行？
如何截断文本（参见下面的标记——我使用的是white-space: nowrap; 和overflow-x: hidden;）？

CSS：

我正在使用以下 SCSS：

div.radio-choice.score {
    a {
        overflow-x: hidden;
        white-space: nowrap;
    }
    &:hover {
        overflow-x: visible;
    }
    input[type="radio"].myradio {
        width:  auto;
        display: inline;
    }
}

当我在p 标签中使用一系列span 标签时，我得到了我想要的行为。如果我将input 和a 标记放在一个跨度中，我会得到相同的行为——a 标记从下一行开始，其文本向右溢出。

这可能是有启发性的：当我使用 DOM 检查器时，我看到div.radio-choice.score a 的规则overflow-x: hidden; 行被删除，但white-space: nowrap; 行没有。鉴于有其他 S/O 文章谈论截断锚文本，为什么要删除这条规则？

对于断行问题，我目前的解决方案是使用margin-left: -2em; 设置复选框的样式，但我希望有更好的方法来做到这一点。

至于为什么我的锚文本没有被截断，我将不得不缩小范围。现在我正在使用 500 行 SCSS，很容易有其他东西干扰它。但与此同时，我希望遇到这个问题并找到解决方案的人，或者对 CSS 机制有深入了解的人，可以参与进来。

【问题讨论】：

如何为父级使用显示表格并为子级显示表格单元格？

标签： html css line-breaks

【解决方案1】：

input 和 a 标记都被赋予display: inline-block 以保持它们在同一行。

我为超链接的文本溢出添加了省略号。

div.radio-choice.score {
  max-width: 150px; /* Assumption to create the effect */
}

a {
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100px; /* Assumption to create the effect */
  display: inline-block;
}

a:hover {
  overflow-x: visible;
}

input[type="radio"].myradio {
  display: inline-block;
}

<div class="radio-choice score bottom">
  <input type="radio" name="name" value="v1" class="myradio" /><!--
  --><a target="_blank" href="https://example.com/gudlink">Long description of a very interesting article</a>
</div>

【讨论】：

【解决方案2】：

这应该可行。

a {
  overflow-x: hidden;
  white-space: nowrap;
}
a:hover {
  overflow-x: visible;
}
input[type="radio"].myradio {
  width:  auto;
  display: inline;
}
    
/*
  [ Solution ]
*/
.radio-choice {
  width: 300px;
  display: flex;
  border: 4px grey solid;
  padding: 4px;
}

a {
  text-overflow: ellipsis;
}

<div class="radio-choice score bottom">
  <input type="radio" name="name" value="v1" class="myradio" />
  <a target="_blank" href="https://example.com/gudlink">Long description of a very interesting article</a>
</div>

【讨论】：