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

Here's an example

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>

HTML INPUT无线电元素文本的CSS对齐方式

3 个答案: