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

时间：2019-06-23 18:54:20

标签： css

我正在尝试做一件看起来很简单的事情，但是经过数小时的研究，仍未找到一个切实可行的解决方案。我只是在尝试确保当复选框或单选按钮的标签足够长以包装到第二行时，第二行已适当缩进。 （如果标签确实很长，则在第3至第3行使用同上）。我正在寻找纯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>

这是我希望复选框相对于文本位于的示例： Desired result

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

4 个答案:

答案 0 :(得分：1)

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和
    • [名称]有两个重要特征
      1. 如果[name]值由多个表单控件（<input>，<textarea>，<select>等）共享，则可以将它们收集到HTML集合/ NodeList中。
      2. 为了在提交事件中包含表单控件值，该表单控件需要[name]属性。
  • 属性[type]是必需的，其值为"radio"或"checkbox"。

CSS

缩进列表很简单 不直观。将以下内容分配给<ul>，<ol>或<dl> 

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

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

答案 1 :(得分：1)

Persjin已经关闭。

将复选框置于@Data @NoArgsConstructor @AllArgsConstructor @Entity @Table public class DinnerTable { @Id @GeneratedValue(strategy = GenerationType.SEQUENCE, generator = "dintable_generator") @SequenceGenerator(name="dintable_generator", sequenceName = "dintable_seq", allocationSize = 1, initialValue = 1) private Long id; private long dinnerTableId; private int places; @ManyToOne(fetch = FetchType.LAZY) @JoinColumn(name = "dinner_id") private Dinner dinner; 中。将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;
}

答案 2 :(得分：0)

将输入内容放在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>

答案 3 :(得分：0)

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

这是我的代码：

<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中尝试过此操作，所以我还不知道它是否可以在每种操作系统的每种浏览器中使用。我也不知道这对视力障碍等残疾人的效果如何。如果我知道这种方法的主要缺点，我将尝试对其进行更新。

相关问题
最新问题