将单选按钮和标签放在同一行中，当标签文本在多行中换行时

Question

我希望我的单选按钮及其标签位于同一行。我能够实现它。但是当右侧标签很大时，它需要以特定的格式包装。我如何实现它。我可以使用宽度，任何其他可用选项吗？

<div class='wrapper'>
<input type='radio'>
<label class='label'>This is a very big text and should wrap as attached in image</label>

Answer 1

您可以使用CSS属性float将单选按钮对齐左侧，将文本对齐到右侧，以达到以下要求。 Working example

<div class='wrapper'>
<input type='radio'>
<label class='label'>This is a very big text and should wrap as attached in image</label>
</div>

.wrapper {
  border: 1px solid grey;
  width: 15%;
  float: left;
}
.wrapper input {
  float :left;
  display: inline-block;
  width: 5%;
}
.wrapper label {
  float:right;
  display:inline-block;
  width: 91%;
}

Answer 2

最简单的解决方案是将display:flex添加到包装器中：

＆＃13;

＆＃13;

.wrapper {
 display:flex;
}

＆＃13;

<div class='wrapper'>
<input type='radio'>
<label class='label'>This is a very big text and should wrap as attached in image text and should wrap as attached in imag</label>
</div>

＆＃13;

＆＃13;

＆＃13;

如果你需要一些对齐也很容易：

＆＃13;

＆＃13;

.wrapper {
  display: flex;
  margin:20px 0;
  border:1px solid;
}

＆＃13;

<div class='wrapper' >
  <input type='radio'>
  <label class='label'>This is a very big text and should wrap as attached in image text and should wrap as attached in imag text and should wrap as attached in image text and should wrap as attached in imag text and should wrap as attached in image text and should wrap as attached in imag</label>
</div>
<div class='wrapper' style="align-items:center;">
  <input type='radio'>
  <label class='label'>This is a very big text and should wrap as attached in image text and should wrap as attached in imag text and should wrap as attached in image text and should wrap as attached in imag text and should wrap as attached in image text and should wrap as attached in imag</label>
</div>
<div class='wrapper' style="align-items:flex-end;">
  <input type='radio'>
  <label class='label'>This is a very big text and should wrap as attached in image text and should wrap as attached in imag text and should wrap as attached in image text and should wrap as attached in imag text and should wrap as attached in image text and should wrap as attached in imag</label>
</div>

＆＃13;

＆＃13;

＆＃13;