Question

我有以下HTML ...

<div>
<input type="radio" value="some value">some text here<br />
<input type="radio" value="some value">some text here and long<br />
</div>

div的宽度为110像素。当某些文字出现在下面时，它应该像这样在同一行。

o some text
o some text
  and logn

Answer 1

这可以通过在代码中添加一些css来完成。

<强> HTML：

<div>
    <input type="radio" value="some value" />
    <label>some text here</label>
    <br />
    <input type="radio" value="some value" />
    <label>some text here and long</label>
    <br />
</div>

<强> CSS：

div {
    width: 110px;
}
input[type="radio"] {
    float: left;
}
label {
    float: left;
    width: 80%;
}

选中此JSFiddle

Answer 2

尝试将它放在这样的表格上：

<div style="width: 110px;">
    <table>
        <tr>
            <td><input type="radio" value="some value"></td>
            <td>some text here</td>
        </tr>
        <tr>
            <td><input type="radio" value="some value"></td>
            <td>some text here and long</td>
        </tr>
    </table>
</div>

Answer 3

这似乎只是我可能的解决方案。

Demo

div{
    width: 110px;
    position:relative;
    margin-left: 15px;
}
input[type="radio"]{
    position:absolute;
    left: -20px;
}

或

Demo

div{
    width: 110px;
    position:relative;
    padding-left: 20px;
}
input[type="radio"]{
    position:absolute;
    left: 0;
}

将输入文本缩进到与上面相同的行中

3 个答案: