tdとinputを横並びにする

trの直下にpを配置してtdやinputを書いてるんですがこれだとチェックボックスとサッカーやフットサルといった文字列がなかなか横並びにできません
text-align: center;を使ってみたりdisplay: inline-block;を使ってみたりしましたがだめでした

□
サッカー

↑これが現状です

□ サッカー

こんな感じにしたいです

pはブロック要素でinputがインラインなのはわかっているんですが...

html
1<table id="table2" align="center">
2          <tr>
3            <p>
4            <td>趣味:</td>
5            <td><input type="checkbox">サッカー</td>
6            <td><input type="checkbox">フットサル</td>
7            <td></td>
8            <td></td>
9            <td></td>
10            </p>
11          </tr>
12</table>

css
1#table2 {
2  border: 1px solid red;
3  width: 80%;
4  height: 100px;
5  font-size: 12px;
6}
7
8#table2 td {
9  border: 1px solid red;
10  width: 17%;
11}
12
13#table2 td input {
14  width: 100%;
15  display: inline-block;
16}

m.ts10806

2018/07/06 00:43 編集

tr,tdのそれぞれの役割を分かってそこにpを置いているのでしょうか。HTML構文チェックにかけてみると良いです。　http://www.htmllint.net/html-lint/htmllint.html

m.ts10806

2018/07/06 00:44

↑は本件とはあまり関係ありませんが、ちょっとひどいですね。上記構文チェッカーでHTML5にチェック入れて確認してみると良いです。非推奨要素も使われてますし。

dit.

2018/07/06 01:17

<tr>直下に<p>を置く意図を説明してください。

退会済みユーザー

2018/07/06 01:21

ぶっちゃけどこかのサイトでそう書いてあったのでこれがinputの右に何かを書く定石かと思ってました。

m.ts10806

2018/07/06 01:29 編集

どこか分からないサイトを丸々信用してしまうのも問題です。それ以前の問題が山積しているので、そこから解決すべきです。指示した通りにしか動かないので感覚でやっては動かないのは当然ですよ。

m.ts10806

2018/07/06 01:29 編集

で、最初のコメントの構文チェッカーは試してみたのでしょうか。そもそも何に対する返答にもなってませんよ。

dit.

2018/07/06 01:30

inputをwidth: 100%;にしている時点で気づいてほしいですね…。「とりあえずなんでもかんでもコピペ」だとあとで泣きを見ます。そのコードがどのような意図で書かれているのか1つずつ確認することも必要です。

行動規範の内容に同意します

回答2件

<tr> と <td> の間に <p> は置けないので、まずは不要な <p> タグを除去して、CSSをすべてコメントアウトしてみてください。
ごちゃごちゃしてわかりにくいなら、まずは一旦何もスタイルを指定していない状態を作ってどうなるか確認してから、必要に応じてスタイルを追加してはどうでしょうか。

投稿2018/07/06 01:18

mather

総合スコア6753

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6	</head>
7	<body>
8		<div>
9			<form action="">
10				<table>
11					<tr>
12						<th>趣味</th>
13						<td>
14							<label>
15								<input type="checkbox" name="hobby[]" />
16								サッカー
17							</label>
18						</td>
19						<td>
20							<label>
21								<input type="checkbox" name="hobby[]" />
22								フットサル
23							</label>
24						</td>
25					</tr>
26				</table>
27			</form>
28		</div>
29	</body>
30</html>