html - HTML INPUT 单选元素文本的 CSS 对齐方式

Question

我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/>元素处于同一垂直水平。

任何帮助都感激不尽。

Answer 1

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

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

这是一个例子

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

您将标签变成带有左边距的浮动块元素。

Answer 3

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

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