WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:<td>内の二つの要素の表示位置を分ける。

0:[投稿] Yachimata [2003/02/28 13:01 ][環境:win98,IE6 わからない]

こんにちは、Yachimataです。
レイアウト関連で質問があります。

以下のような記述がある場合、表示させると文字とボタンが左に寄って表示されると思います。
このような場合に、ボタンだけ右寄せにする事は出来ないでしょうか。

<table>
<td>ボタン<input type="button"></td>
</table>

宜しくお願いします。


1:[回答] yuu [2003/02/28 13:02 ]

<table width="100%">
<td align=left>ボタン</td><td align=right><input type="button"></td>
</table>


2:[回答] yuu [2003/02/28 13:03 ]

って、なんか<tr>抜けてるけど。


3:[質問] Yachimata [MAIL] [2003/02/28 14:06 ]

ごめんなさい、説明不足でした。

一つの <td> の中で、という事なんです。


4:[回答] yuu [2003/02/28 14:28 ]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<title>ひとつのtdの中で…ということなんです</title>
<style type="text/css"><!--
label {
    display:block;
    float:left;
}
input#button {
    display:block;
    float:right;
}
--></style>
</head>
<body>
<table summary="ラベル名とボタンが入っている謎の表" width="100%">
<tr>
<td><label for="button">ボタン</label><input type="button" value="ボタン" id="button"></td>
</tr>
</table>
</body>
</html>


5:[回答] yuu [2003/02/28 14:30 ]

↑あまりよく考えずに書いているので、たぶんIEだけ。


6:[回答] Yachimata [MAIL] [2003/02/28 14:47 ]

なるほど・・・・・・

早速ちょっと試してみようと思います。

yuuさん、ありがとうございました。


7:[回答] yuu [2003/02/28 14:56 ]

ようするに段組レイアウトしたいっていうことになってしまうので、あとはこういうのとか。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<title>ひとつのtdの中で…ということなんです</title>
<style type="text/css"><!--
td {
   text-align:right;
}
label {
   position:absolute;
   top:auto;
   right:auto;
   bottom:auto;
   left:0px;
}
--></style>
</head>
<body>
<table summary="ラベル名とボタンが入っている謎の表" width="100%">
<tr>
<td><label for="button">ボタン</label><input type="button" value="ボタン" id="button"></td>
</tr>
</table>
</body>
</html>

ひとつのtdの中でというのなら、ひとつのtdの中にもう一度
<table width="100%">
<tr>
<td align=left>ボタン</td><td align=right><input type="button"></td>
</tr>
</table>
としたほうが手っ取り早いと思いますが。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World