Question

我有一个表，在一列中显示输入的标签，然后第二列显示输入的类型。但是，我有两个单选按钮，但我希望两个单选按钮的宽度更小，而不依赖于html表的其余部分。

实施例

<table style="line-height:30px;">
    <tr>
        <td>
            <label>test</label>
        </td>
        <td width="50px"></td>
        <td>
            <input type="text" />
        </td>
    </tr>
    <tr>
        <td>
            <label>example</label>
        </td>
        <td width="50px"></td>
        <td>
            <input type="radio" name="example" value="1"/> 1
        </td>
        <td>
            <input type="radio" name="example" value="2"/> 2
        </td>
    </tr>
</table>

看起来像

enter image description here

但我希望将2单选按钮移近1号单选按钮，我该如何实现？

由于

Answer 1

试试这个（除了colspan属性外，与你的相同）：

<table style="line-height:30px;">
<tr>
    <td>
        <label>test</label>
    </td>
    <td width="50px"></td>
    <td colspan="2">
        <input type="text" />
    </td>
</tr>
<tr>
    <td>
        <label>example</label>
    </td>
    <td width="50px"></td>
    <td>
        <input type="radio" name="example" value="1"/> 1
    </td>
    <td>
            <input type="radio" name="example" value="2"/> 2
        </td>
    </tr>
</table>

Answer 2

我建议不要使用表，因为它们已被弃用。我使用了基于div的布局和分配的类。这样做可以更好地控制内容。这就是我想出的。您可以修改它以根据需要设置单选按钮的样式。

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>center a div within a div?</title>

<style type="text/css">

.text-input{
    text-align: center;
    padding: 10px;
    color: green;
}

.label{
    padding: 15px;
}

.enter-text:hover{
    border: thin solid #000099; 
}


.radio-buttons{
    text-align: center;
    padding: 10px;
}

.radio{
    margin-left: 30px;
}

.radio2{
    margin-left:59px;
}

</style>

</head>

<body>

<div class="text-input">
    <label class="label">test</label>
    <input type="text" class="enter-text" />

</div>

<div class="radio-buttons">
    <label>example</label>
    <input type="radio" name="example" value="1" class="radio"/> 1
    <input type="radio" name="example" value="2" class="radio2"/> 2
</div>
</body>
</html>

HTML表格列宽取决于表的其余部分

2 个答案: