如何使用 CSS 使复选框和单选按钮中的长标签适当换行和缩进？

Question

我正在尝试做一些看起来应该非常简单的事情，但经过数小时的研究尚未找到真正有效的单一解决方案。我只是想确保当复选框或单选按钮的标签足够长以换行到第二行时，第二行适当缩进。 （如果标签真的很长，则第三行到第 n 行也是如此）。我正在寻找一个纯 CSS 的解决方案；如果可以的话，我不想涉及 JavaScript。

这个 jsfiddle 是我能得到的最接近的，但它有一个致命的缺陷，即文本从复选框后面的行开始，而不是在同一行。如何使标签跟随复选框在同一行，然后缩进其余行，以便它们与第一行最左边的字母（而不是复选框）对齐？

.mytext {
  display: grid;
  margin-left: 2em;
}

.mytext:first-line {
  margin-left: 0;
}

<input type="checkbox" name="Saturdays" id="Saturdays" checked>
<label for="Saturdays" class="mytext">I am available to meet on the first Saturday of each month (with the odd exception since I sometimes go away, especially on long weekends, or because I am sick or just not in the mood to attend a regularly scheduled meeting).</label><br>

以下是我希望复选框相对于文本的放置方式的示例：

我需要找到某种方法使复选框出现在第一行文本的开头，无论标签是一行还是几行长度。 （我觉得这应该是默认行为，但显然不是。）

Answer 1

Persjin 很接近。

将复选框置于

label

中。将

label

设为块元素，并为其指定

position:relative

，以便子元素相对于它定位。为

label

提供一些左侧填充，然后将复选框置于最左侧。

label {
  position:relative;
  padding-left:2.5ch;
  display: block;
  margin-bottom: 5px;
}

label > [type=checkbox] {
  position: absolute;
  left: 0;
}

<label>
  <input type="checkbox"/>
  Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here 
</label>
<label>
  <input type="checkbox"/>
  More Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here 
</label>

由于您已经完成了网格版本，这里有一个更简化的网格选项：

.grid-container {
  display: grid;
  grid-template-columns: 3ch 1fr;
  align-items:baseline;
}

.grid-container input {
  grid-column-start: 1;
}

.grid-container label {
  grid-column-start: 2;
}

<div class="grid-container">
  <input type="checkbox" name="Mondays" id="Mondays">
  <label for="weekdays">I am available to meet on Mondays.</label>
  <input type="checkbox" name="Saturdays" id="Saturdays">
  <label for="Saturdays" style="color: black;">I am available to meet on the first Saturday of each month (with the odd exception since I sometimes go away, especially on long weekends, or because I am sick or just not in the mood to attend a regularly scheduled meeting).</label>
  <input type="checkbox" name="Sundays" id="Sundays">
  <label for="Sundays">I am available to meet on the first Sunday of each month    except if it is on a long weekend.</label>
</div>

Answer 2

HTML

HTML 布局由一个列表（

<ol>

、

<ul>

或

<dl>

）组成。每个列表项（

<li>

或

<dd>

）包含一个输入/标签对 (

<input type="radio/checkbox">

<label>

)。

<ol>
  <li>
    <input id="ID" name="GROUP" type="RADIO/CHECKBOX">
    <label for="ID">TEXT CONTENT</label>
  </li>
  ...
</ol>

• 属性

  #id

  、

  [name]

  和

  [for]

  是可选的。
  • 为 的 #id 和 的 [for] 分配相同的值，以便它们相互关联。这种关联允许该对的行为就像用户 “选择”/“选中”/“单击”等。 单击 时的实际 ，反之亦然。
  • [名称]有两个重要特征
    1. 如果 [name] 值被多个表单控件（

       <input>

       、

       <textarea>

       、

       <select>

       等）共享，则可以将它们收集到 HTML Collection/NodeList 中。
    2. 为了将表单控件值包含在提交事件中——该表单控件需要一个 [name] 属性。
• 属性

  [type]

  是必需的，其值为

  "radio"

  或

  "checkbox"

  。

---

CSS

缩进列表很简单但不直观。将以下内容分配给

<ul>

、

<ol>

或

<dl>

ol,
ul {
  list-style: none;
  padding-left: 4ch;
  text-indent: -4ch;
}

A

padding-left

，然后是

text-indent

来抵消它的长度。

:root {
  font: 500 3vw/1.45 Arial
}

ol,
ul {
  list-style: none;
  padding-left: 4ch;
  text-indent: -4ch;
}

li {
  margin-bottom: 1rem;
  line-height: 1.45rem;
}

input,
label {
  font: inherit;
}

[type=checkbox],
[type=radio] {
  width: 2ch;
  height: 1rem;
  line-height: 1rem;
  margin-right: 1ch;
  transform: translateY(25%)
}

<ol>

  <li>
    <input id='A1' name='Q1' type='checkbox'>
    <label for='A1'>D@ +h3 U5Ed p@g3 c0nT3nT,, 70p p@93 p@RticUlAR 7|24n5|4735 iz. != @n33 Wh3|\| n0n. != 91ve qu3ry 8Ut, t0 533 f1|3z, vv1|_|_. |7 4r3 717|3 3n4b|3d, v3r510|\|, j00r p@r+1cUL4r M@Y y@. Pdf 47 7h3y 8@rr13r, 7he 1+ kn0w 5peNDInG, 4r3 4s vv1t |3tz0rz.</label>
  </li>

  <li>
    <input id='B1' name='Q1' type='checkbox'>
    <label for='B1'>Лорем ипсум долор сит амет, еа хас мандамус диссентиас. Вел меис урбанитас медиоцритатем ет, про цу мунди цорпора перпетуа. Те цум вери вивендо диссентиунт, пер ин нобис оптион интеллегам. Цу хис пробо доценди рецтеяуе, ад лорем епицури цомплецтитур ест.</label>
  </li>

  <li>
    <input id='C1' name='Q1' type='checkbox'>
    <label for='C1'>Dee an eise botze, ké Duerf goung déi. Wat Dach Völkerbond en. Fort d'Lëtzebuerger eng wa, Mecht weisen am sin, dat an stét jeitzt d'Vioule. Um bei wuel Kaffi. Spilt lossen muerges un ass, alle gebotzt d'Stroos et zum, rei do iweral iwerall.</label>
  </li>

  <li>
    <input id='D1' name='Q1' type='checkbox'>
    <label for='D1'>やぶら小路の藪柑子。寿限無、寿限無、長久命の長助、水行末 雲来末 風来末、グーリンダイのポンポコピーのポンポコナーの。水行末 雲来末 風来末。シューリンガンのグーリンダイ、シューリンガンのグーリンダイ、食う寝る処に住む処。五劫の擦り切れ、長久命の長助。寿限無、寿限無。食う寝る処に住む処、パイポパイポ パイポのシューリンガン。グーリンダイのポンポコピーのポンポコナーの。</label>
  </li>

</ol>

<hr>

<ul>

  <li>
    <input id='A2' name='Q2' type='radio'>
    <label for='A2'>լոռեմ իպսում դոլոռ սիթ ամեթ, եոս ալիքուանդո ելաբոռառեթ իդ, հաբեո վեռեառ վեռթեռեմ սեա նե. նո քուի սալութանդի պռինծիպես սպլենդիդե, եսթ եխ դենիքուե մանդամուս. սեա ադ սալութանդի վոլուպթաթում եֆֆիծիանթուռ, հիս թե աեքուե ծոնգուե քուալիսքուե. եսթ ինիմիծուս եվեռթիթուռ եա.</label>
  </li>

  <li>
    <input id='B2' name='Q2' type='radio'>
    <label for='B2'>ლორემ იფსუმ დოლორ სით ამეთ, დუო ფეუგიათ ევერთითურ ეი, ეთ ფერ ველით სიმილიყუე ფჰილოსოფჰია, უთ ვიხ ეხერცი ცომფლეცთითურ. ეი ვიხ დეცორე ლიბერავისსე. ან ჰინც ვიდით რეცუსაბო სედ, ელით აეთერნო დეთრაცთო ეა ვიმ. იისყუე ცორფორა ცონცლუდათურყუე იუს ად, ნე მელ ყუაეყუე სფლენდიდე, ნე ჰას ვოლუფთათუმ ვითუფერათორიბუს. ინ ნობის ირიურე ფერფეცთო სით.</label>
  </li>

  <li>
    <input id='C2' name='Q2' type='radio'>
    <label for='C2'>황금시대를 있으며. 아니한 얼마나 사는가 힘차게 물방아 그리하였는가? 이상 인간이 이상이 피에 이상은 우리 보라. 것은 있는 미인을 뭇 황금시대의 사막이다. 이상의 우리는 하는 현저하게 것이다, 주며. 있으며. 두손을 웅대한 귀는 사랑의 노년에게서 청춘 이상의 그들은 운다, 인간은 그들은 뜨고.</label>
  </li>

  <li>
    <input id='D2' name='Q2' type='radio'>
    <label for='D2'>Λορεμ ιπσθμ δολορ σιτ αμετ, νε vιδερερ λεγιμθσ θσθ. Ιθvαρετ μανδαμθσ εα μει, εθμ ορατιο σαπιεντεμ νο, πρι ελιτ λορεμ λαβιτθρ εθ. Νθλλαμ τορqθατοσ εοσ ιδ, πριμα jθστο vελ εξ, επιcθρι ελεcτραμ cθ ιθσ. Μεα πριμα νονθμεσ λιβεραvισσε εξ, απεριαμ cομπρεηενσαμ ιδ vιμ. Λαθδεμ δολορεσ ιν νεc, μελ αδηθc qθαερενδθμ σθσcιπιαντθρ εξ</label>
  </li>

</ul>

Answer 3

将输入放入 label 元素内。

<label>
  <input type="checkbox"/>
  Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here 
</label>

Answer 4

经过更多研究和反复试验，我已经找到了自己的答案。如果我设置一个由单行和两列组成的网格容器，并将复选框放在左侧列中，将标签放在右侧列中，则复选框始终出现在其列的顶部而不是中间，无论标签中有多少行。标签也进行了适当的缩进，以便每行都从同一位置开始。

这是我的代码：

<div class="grid-container">
<div><input type="checkbox" name="Mondays" id="Mondays"></div>
<div><label for="weekdays">I am available to meet on Mondays.</label></div>
</div>

<div class="grid-container">
<div><input type="checkbox" name="Saturdays" id="Saturdays"></div>
<div><label for="Saturdays" style="color: black;">I am available to meet on the first Saturday of each month (with the odd exception since I sometimes go away, especially on long weekends, or because I am sick or just not in the mood to attend a regularly scheduled meeting).</label></div>
</div>

<div class="grid-container">
<div><input type="checkbox" name="Sundays" id="Sundays"></div>
<div><label for="Sundays">I am available to meet on the first Sunday of each month    except if it is on a long weekend.</label></div>
</div>

.grid-container {
display: grid;
grid-template-columns: max-content 30em;
grid-column-gap: 1em;
}

.grid-container > div {
text-align: left;
padding-bottom: 1em;
}

这是jsfiddle

我只在 Windows 上的当前版本的 Firefox 中尝试过此操作，所以我还不知道它是否适用于每个操作系统上的每个浏览器。我也不知道这对于视力障碍等残疾人士来说效果如何。如果我了解到这种方法的任何主要缺点，我会尝试更新。

Answer 5

使用弹性盒：

 label {
    display: flex;
    align-items: start;
 }
 
 .container {
    display: flex;
    flex-direction: column;
    gap: 7px;
 }

<div class="container">
  <label>
    <input type="checkbox"/>
    Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here
  </label>
  <label>
    <input type="checkbox"/>
    More Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here
  </label>
</div>

具有 Flexbox 布局的容器元素是可选的，但我喜欢使用

gap

属性来设置项目之间的间距。