テキスト入力と2つのチェックボックスを並べて表示するHTMLがあります。HTMLはツールによって生成されるため、HTMLの作成方法を変更することはできず、CSSを使用してのみスタイルを適用できます。私の簡略化されたHTMLとCSSは次のとおりです。
<html>
<head>
<style type="text/css">
td {
padding: 0;
}
fieldset {
display: inline;
padding: 0;
margin: 0
}
input[type="text"] {
margin: 0;
padding: 0;
}
table.checkboxs {
border-collapse:collapse;
}
table.checkboxs td {
border: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<input type="text" id="item1" value="" />
<fieldset>
<table summary="" class="checkboxs" border-collapse="">
<tr>
<td><input type="checkbox" id="chkbox_0" name="chkbox" value="1" /><label for="chkbox_0">One</label></td>
<td><input type="checkbox" id="chkbox_1" name="chkbox" value="2" /><label for="chkbox_1">Two</label></td>
</tr>
</table>
</fieldset>
</body>
</html>
これにより、チェックボックスが次のようなテキストアイテムよりも上に表示されます。
私が欲しいのは、これらが次のように整列していることです。
それは簡単に思えますが、それを達成する方法がわかりません。テキスト入力またはフィールドセットのいずれかを削除すると、残りの要素が最小の垂直方向のスペースを占有します。テキスト入力がページにプッシュされるのは、それらが一緒になっている場合のみです。
HTMLの欠点を必ず指摘してください。しかし、私が言ったように、それは実際には私の管理下にはないので、CSSを使用してのみレイアウトに影響を与えることができます。