html - HTMLINPUT無線要素のテキストのCSS配置

Question

input[type="radio"]固定幅のブロックコンテナ内に要素があります。要素のサポートテキストが<input/>1行に収まらず、2行以上になります。例えば：

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/>要素（またはそのテキスト）のスタイルを設定して、テキストが1行おきに最初の行と同じインデントレベルで始まるようにするにはどうすればよいですか？<input/>テキストの最初の行は、要素と同じ垂直レベルである必要があります。

どんな助けでも大歓迎です。

Answer 1

コンテナは正の左paddingと負のを使用できますtext-indent。

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

これが例です

Answer 2

1つのオプションがあります：

<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を変更することにより、入力の垂直レベルを変更できます。コードは次のとおりです。classid

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