HTML表格列<；td>；宽度取决于桌子的其余部分_Html

HTML表格列<；td>；宽度取决于桌子的其余部分

html

HTML表格列<；td>；宽度取决于桌子的其余部分,html,Html,我有一个表格，在一列中显示输入的标签，然后在第二列中显示输入的类型。但是，我有两个单选按钮，但我希望这两个单选按钮的宽度更小，并且不依赖于html表的其余部分例如 <table style="line-height:30px;"> <tr> <td> <label>test</label> </td> <td width="50px"&g

我有一个表格，在一列中显示输入的标签，然后在第二列中显示输入的类型。但是，我有两个单选按钮，但我希望这两个单选按钮的宽度更小，并且不依赖于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>


测试
例子
1.
2.

看起来像

但是我想把2单选按钮移近1单选按钮，我该如何实现这一点

谢谢您尝试以下方法（除了colspan属性外，与您的方法相同）：


测试
例子
1.
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>


在一个div中居中放置一个div？
.文本输入{
文本对齐：居中；
填充：10px；
颜色：绿色；
}
.标签{
填充：15px；
}
。输入文本：悬停{
边框：薄实线#000099；
}
.单选按钮{
文本对齐：居中；
填充：10px；
}
.收音机{
左边距：30px；
}
.无线电2{
左边距：59px；
}
测试
例子
1.
2.

将两者放在同一个td单元中如何？如果您不想让表表现得像表，为什么要使用表？

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