WEB相談室

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

タイトル:リンクを横に並べたい

0:[投稿] mazda [2002/09/18 11:43 ][環境:WIN+IE UNIX系+OTHER]

レイアウト上の問題なのですが、

<table border="1">
<tr>
<td>
<form action="index.html" method="post">
<input type="hidden" name="bom" value="あああ">
<a href="javaScript:document.forms[0].submit();">てすと1
</form>
<form action="index.html" method="post">
<input type="hidden" name="bom" value="いいい">
<a href="javaScript:document.forms[0].submit();">てすと2
</form>
<td>
</tr>
</table>

と言うソースを書くと<td>〜</td>の中に、
てすと1

てすと2
と言う風に縦に並んだリンクが表示されてしまい美しくありません。これを、
てすと1 てすと2
のようにすることは可能なのでしょうか?
宜しくお願いいたします。


1:[回答] のぐりん [MAIL] [2002/09/18 12:00 ]

<td>
<form action="index.html" method="post">
<input type="hidden" name="bom" value="あああ">
<a href="javaScript:document.forms[0].submit();">てすと1
</form>
</td>
<td>
<form action="index.html" method="post">
<input type="hidden" name="bom" value="いいい">
<a href="javaScript:document.forms[0].submit();">てすと2
</form>
</td>

でOKだと思います.


2:[回答] あ [2002/09/18 12:23 ]

スタイルシートで一発解決
td form{display:inline;}

…ですが、tdの中にformを入れるとか、inputを囲ってないとかソースが好ましくないですよ、それ。


3:[回答] のぐりん [MAIL] [2002/09/18 13:41 ]

そうですね。</a>もありませんね。


4:[回答] mazda [2002/09/18 17:05 ]

すみません。参考までに慌てて書いたソースだったので、至らない点がありますね。
とりあえず、スタイルシートを使用してみました、それで質問なのですが、スタイルシートだと、確かに一行にまとまりました。
ですが、
てすと1      てすと2
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
と言う風になってしまいます。これを
てすと1 てすと2
 ̄ ̄ ̄ ̄  ̄ ̄ ̄ ̄
という感じにしたいのですが・・・


5:[回答] あ [2002/09/18 18:55 ]

>>4

 今、貴方が投稿しているPageの上部には CSS と書かれたリンクがあるはずです。その先のPageには、質問の回答が存在するでしょう。
 なんでもかんでも質問するのではなく、ヒントを得たら自分で捜すことも大事ではないでしょうか?

スタイルなCSSの基礎講座
表示と位置
http://www.parkcity.ne.jp/~chaichan/src/cssichi.htm


6:[回答] mazda [2002/09/19 18:23 ]

リンクの先を見て、compactやrun-in等を試してみたのですが
うまくいきません。よろしければヒントでも頂けないでしょうか?


7:[回答] あ [2002/09/19 19:57 ]

 あーちょっと突き放しすぎましたね。ご容赦を。
displayプロパティは、インラインだけです。
その下のpositionプロパティで位置決めするかな?と思ったのですが、説明不足でした。
ま、このケースだとpositionもあんまりなので、マージンで如何でしょ?

<style>
td form{display:inline;}
.rightside{margin-left:-npx; /*nはテキトーなサイズに*/
}
</style>

<table border="1">
<tr>
<td>
<form action="index.html" method="post">
<input type="hidden" name="bom" value="あああ">
<a href="javaScript:document.forms[0].submit();">てすと1
</form>
<form action="index.html" method="post" class="rightside">
<input type="hidden" name="bom" value="いいい">
<a href="javaScript:document.forms[0].submit();">てすと2
</form>
<td>
</tr>
</table>


8:[回答] 0120 [2002/09/21 14:33 ]

table使わなきゃいいじゃん


9:[回答] あ [2002/09/21 16:50 ]

>>8
ソレが一番正解だろうね(w

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World