CSS：在单选按钮后对齐多行文本

Posted 2023-03-05

【中文标题】CSS：在单选按钮后对齐多行文本

【英文标题】：CSS: Align multiple lines of text left after a radio button

【发布时间】：2017-08-31 00:59:57

【问题描述】：

不幸的是，我真的不知道如何用正确的术语来描述这个问题，到目前为止我很少使用 CSS。

问题：最下方单选选项的第二行应与第一行对齐（我在此处画了垂直线）。当然，单选按钮本身应该保持在原来的位置。

应该很容易，但就像我说的那样，我不知道正确描述这个的术语

【问题讨论】：

绝对放置单选按钮或使用 flexbox。

把你的代码放在问题中

欢迎来到 SO，请访问 help centre 以查看 how to ask a good question。如果您不提供任何代码，我们将无法为您提供帮助 - 请参阅如何创建 minimal reproducible example

【参考方案1】：

有一些方法可以制作这种结构。您可以使用flexbox。另一方面，您可以将无线电绝对放置在某个相关容器中。

弹性盒

label 
  display: flex;
  margin-bottom: 20px;


input 
  flex: 0 0 auto;
  margin-right: 10px;


span 
  flex: 1 1 auto;

<h1>Flexbox</h1>
<form>
  <label>
    <input type="radio" name="name" value="val-1">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</span>
  </label>
  <label>
    <input type="radio" name="name" value="val-2">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum d</span>
  </label>
  <label>
    <input type="radio" name="name" value="val-3">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</span>
  </label>
</form>

绝对定位

label 
  position: relative;
  display: block;
  margin-bottom: 20px;


input 
  position: absolute;
  top: 0;
  left: 0;


span 
  display: block;
  margin-left: 30px;

<h1>Absolute</h1>
<form>
  <label>
    <input type="radio" name="name" value="val-1">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</span>
  </label>
  <label>
    <input type="radio" name="name" value="val-2">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum d</span>
  </label>
  <label>
    <input type="radio" name="name" value="val-3">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</span>
  </label>
</form>

【讨论】：

您的代码将所有单选按钮压缩为一个！输入位置必须是相对的 -> 以上内容在 ie 或 firefox 中均未对齐。通过漫无目的的摆弄，我得到了按钮和标签在 ie 中对齐，但它们在 Firefox 中关闭。 form#ausfluganmform fieldset.food 标签 位置：相对；显示：块；边距底部：20px；红色; form#ausfluganmform fieldset.food 输入 位置：相对；顶部：0；左：0； form#ausfluganmform fieldset.food span 显示：块；左边距：30px；

@LMTR14 不确定我明白你在说什么。 FF screenshot，IE screenshot。一切正常。你没有粘贴你的代码，所以我不知道它是否有效。但是上面的代码 sn-ps 工作正常。