HTML INPUT 单选元素文本的 CSS 对齐方式答案

【问题标题】：CSS alignment of text of HTML INPUT radio elementHTML INPUT 单选元素文本的 CSS 对齐方式
【发布时间】：2018-06-08 18:49:14
【问题描述】：

我在固定宽度的块容器内有一个input[type="radio"] 元素。 <input/> 元素的支持文本不能放在一行中，而是包含两行或更多行。例如：

div.leftBlock {
  position: relative;
  float: left;
  width: 275px;
}

<div class="leftBlock">
  <input type="radio" name="foo" value="bar" id="option" /> This is a rather long supporting text that does not fit in one line.
</div>

如何设置<input/> 元素（或其文本）的样式，以使文本所在的每一行都以与第一行相同的缩进级别开始？第一行文本必须与<input/> 元素处于同一垂直高度。

任何帮助将不胜感激。

【问题讨论】：

标签： html css alignment

【解决方案1】：

容器可以使用正左padding和负text-indent。

.leftBlock {
    padding-left: 20px;
    text-indent: -20px;
}
.leftBlock input {
    width: 20px;
}

Here's an example

【讨论】：

仅 .leftBlock 的第一个样式就是一个聪明的解决方案。谢谢。

【解决方案2】：

这是一种选择：

<style>
div.leftBlock {
    position:relative; 
    float:left; 
    width:275px;
} 

.radio {
    float: left;
}

.radio_label {
    display: block;
    margin-left: 1.5em;
}
</style>
<div class="leftBlock">
    <input type="radio" name="foo" value="bar" id="option" class="radio"/>
    <span class="radio_label">
    This is a rather long supporting text that does not fit in
    one line.
    </span>
</div>

你把标签变成一个带有左边距的浮动块元素。

【讨论】：

【解决方案3】：

您可以通过更改该输入的class 或id 中的属性top 来更改输入的垂直级别，这里的代码是：

<style type="text/css">
    .main {
        height:50px;
        line-height:50px;
        font-size:25px;
        position:relative;
    }

    .rd {
        position:inherit;
        top:-2px;
    }
</style>

<div id="main">
    <input type="radio" id="rd" />
    This is a rather long supporting text that does not fit in one line.
</div>

【讨论】：