はじめての親子ハイキングに挑戦!! >>

<input type="button"> ←このボタンを、並べて表示させるにはどうしたら良いでしょうか? (tableは使わない方法で) よろしくお願いいたします

A 回答 (2件)

ソースをください。



inputはインライン要素なので改行は入らないです。
    • good
    • 2
この回答へのお礼

ご指導のとおり、結果として、普通にやってみたら普通に横に並びました。
(同じ悩みを持った人が検索してもいなかったのは当然ですね。。)


★自分の場合の今回の原因は、ただ<table><tr><td>の幅が狭すぎて、横に表示するためのスペースがなかったためと判明しました。m(_ _)m


どうもありがとうございました!!

お礼日時:2011/04/07 18:42

1さんの言うとおりインライン要素なので



<input type="button" value="ボタン" />
<input type="button" value="ボタン" />

で横に並びます。

他に方法があるとしたら、floatを使ったり
liを使うのがあるかなと。

ul{ list-style:none;margin:0;padding:0; }
li{ display:inline; }

<ul>
<li><input type="button" value="ボタン" /></li>
<li><input type="button" value="ボタン" /></li>
</ul>
    • good
    • 3
この回答へのお礼

ご丁寧にどうもありがとうございます!

ご指導のとおり、結果として、普通にやってみたら普通に横に並びました。
(同じ悩みを持った人が検索してもいなかったのは当然ですね。。)

////////////////////////////////////////////
ご指導いただいたように、CSSを使ってもっと難しいものなはずだと考えていただけに
拍子抜けしてしまいました。
////////////////////////////////////////////



★自分の場合の今回の原因は、ただ<table><tr><td>の幅が狭すぎて、横に表示するためのスペースがなかったためと判明しました。m(_ _)m


どうもありがとうございました!!

お礼日時:2011/04/07 18:48

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q複数のボタンを等間隔に、かつ中央に配置する

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button">
<input type="submit" value=">> 進 む>>" />
</div>

↓CSSファイルです↓
div.button {
padding-right:35px;
float:left;
}

上記設定で、ボタンの左右間隔はいい感じにあいたのですが
全体的に左に寄ってしまってます。

よろしくお願いいたします。

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button...続きを読む

Aベストアンサー

<div class="button">
<input type="submit" value="<< 戻る <<" />
<input type="submit" value="選択リセット" />
<input type="submit" value=">> 進 む>>" />
</div>

div.button {
text-align:center;
}
div.button input {
margin: 0px 20px;
}

Qテキストボックスを横並びで表示

テキストボックスを2つ作り横並びに表示したいのですがどうしても縦ならびに表示されてしまいます。

display:inlineをCSSで入れても変化がありません。

<input style="display: inline;" type="text" name="post_1" value="<?=$_SESSION["post_1"]?>">-<input style="display: inline;" type="text" name="post_2" value="?=$_SESSION["post_2"]?>">

他に関係する要素はあるのでしょうか?

Aベストアンサー

横並びに表示するだけであれば最初のinputタグのスタイルに
float: left;
を追加する手があります。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

QHTMLでテーブルを横に並べる方法

HTMLでホームページを作っています。
テーブルを横に二つ並べたいのですが、二つ目のテーブルはどうしても最初のテーブルの下の段になってしまいます。どうしたら横に並べることができますか?
教えていただければ幸いです。
よろしくお願いします。

Aベストアンサー

2列のテーブルを作ったらいかがでしょうか?
<table>
<tr>
<td>1つめのテーブルに入れる内容</td>
<td>2つめのテーブルに入れる内容</td>
</tr>
</table>

それぞれのテーブルをそのまま使いたいならば、
↑のテーブルのセルの中に、それぞれ入れれば2つ並びます。
<table>
<tr>
<td><table>←1つめのテーブル→</table></td>
<td><table>←2つめのテーブル→</table></td>
</tr>
</table>

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Q2個のFormを横並びにしたい

HTML(5)で以下のソースに対して

<form>
<input type="text" id="1">
<input type="text" id="2">
</form>
<form>
<input type="text" id="3">
<input type="text" id="4">
</form>

CSS
form {display:inline}
input {display:block}
と書いた場合に、縦二列、横二列の表示が得られると期待したのですが
全て縦に並んでしまいました。
期待は左の列にid=1, 2が縦に並び、id=3, 4がその横に並ぶ感じです。
1 3
2 4
何か基本的な理解が抜けている気もしているのですがちょっとわからずお力を貸していただけないでしょうか。

なぜこうなってしまうのか仕組みも知りたいので理由を加えて教えていただけると助かります。
簡易的なサンプルコードを記載いたします。

<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<form>
<input type="text" id="1">
<input type="text" id="2">
</form>
<form>
<input type="text" id="3">
<input type="text" id="4">
</form>
</body>
</html>

css
form{display:inline;}
input{display:block;}

関係あるかわかりませんがchrome21とFirefox14を使っています。
よろしくお願いします。

HTML(5)で以下のソースに対して

<form>
<input type="text" id="1">
<input type="text" id="2">
</form>
<form>
<input type="text" id="3">
<input type="text" id="4">
</form>

CSS
form {display:inline}
input {display:block}
と書いた場合に、縦二列、横二列の表示が得られると期待したのですが
全て縦に並んでしまいました。
期待は左の列にid=1, 2が縦に並び、id=3, 4がその横に並ぶ感じです。
1 3
2 4
何か基本的な理解が抜けている気もしているのですがちょっとわからずお力を貸していただけないでし...続きを読む

Aベストアンサー

もっとも大事なこと!!
「メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ( http://jigsaw.w3.org/css-validator/#validate_by_input )」
 そもそもHTMLが間違っています。期待通りに機能するはずもありません。
→HTMLの要素には「ブロックレベル要素と行内要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )」の区別があります。
 これはスタイルシートで変更した結果についても当てはまります。すなわち
【引用】____________ここから
デフォルトでは、ブロックレベル要素は行内要素とは異なるように整形される。 一般に、ブロックレベル要素は新しい行を開始し、行内要素は新しい行を開始しない。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )]より

 理解し難い場合は
form,input{border:solid 1px gray;padding:5px;}
input{border-color:red;}
を書き加えてみると良いでしょう。

★行内要素の内部にブロック要素は入りません。
★行内要素の幅は内容によって変わります。
  →行ボックスの幅は包含ブロックによって、高さは[10.8 行の高さを計算する]で述べる規則に従って決まる。 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#inline-formatting )

 以上二つの結果、内容のない行内要素とブロック要素が4つになりますから、すべて改行されて一行開けて縦に並ぶはずです。そのように指定したのですから、そのとおりの結果になると言うことです。

 通常、二つのブロックを横に並べる場合は、ブロックの幅(ブロック要素は幅を指定できます。)を狭くして、positionないしfloatで位置を指定します。inline-blockの場合は幅指定だけでよいです。
 →'display' ( http://www.w3.org/TR/CSS2/visuren.html#propdef-display )
  CSS2.1で変更になっていますから、CSS2.1のdisplayの値です。

1) HTMLを修正します。inputは行内要素ですからブロック要素内に入ります。
<div class="form">
 <form action="./">
  <p>
   <input type="text" name="abc" size="20" value="abc">
  </p>
  <p>
   <input type="text" name="efg" size="20" value="efg">
  </p>
 </form>
 <form action="./">
  <p>
   <input type="text" name="hij" size="20" value="hij">
  </p>
  <p>
   <input type="text" name="klm" size="20" value="klm">
  </p>
 </form>
</div>
2)CSSは可能な限り、ブロック→行内、その逆はしないほうが良い。
form{display:inline-block;width:40%;}
あるいは
div.form{position:relative;}
form{width:48%;}
form+form{position:absolute;top:0;right:0;}
または、(非推奨)
form{float:left;width:48%;}


★なぜフォームが二つあるのですか、提出先が同じなら、提出ボタン(input type="submit",<button ****>で制御したほうがよいかと。

もっとも大事なこと!!
「メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ( http://jigsaw.w3.org/css-validator/#validate_by_input )」
 そもそもHTMLが間違っています。期待通りに機能するはずもありません。
→HTMLの要素には「ブロックレベル要素と行内要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )」の区別があります。
 これはスタイルシートで変更した結果についても当てはま...続きを読む

Qjavascriptでセレクトボックスの"selected"を動的につ

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>月

<select name='day'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日


このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか?

よろしくお願いします。

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8...続きを読む

Aベストアンサー

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>月

<select name='day'>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
</div>
</form>

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<opt...続きを読む

Qテーブル内の文字列を改行させたい

<TABLE border="1">
<tr> <TD>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD>
</tr>
</TABLE>

これを、ある一定の幅を指定して改行させたいのですが、
CSSを使おうが使わず指定しようが、反映されません。
全角文字だと反映されます。

IE6、IE7で対応させたいと思っています。

CSSでも何でも良いので、どうすれば対応出来るのか
ご教示下さい。

Aベストアンサー

英数半角文字だと、続けて入力した場合、一つの単語とみなして禁則処理をしてしまうんだと思います。
なので、<br>で改行するのがいいのかと思いますが、
IEで対応したいということなので、IE7で動作するかはわかりませんが、
word-break:break-all;
の指示で単語の切れ目を無視して改行してくれると思います。

参考URL:http://www.htmq.com/style/word-break.shtml

Qリンクをクリックした時にformからPOST送信したい。

HTML、PHP、JavaScript等でサイトを作っているのですが・・・。

【実現出来ている例】
<form name="form1" method="post" action="Next.php" onSubmit="return InputCheck()">
 <input type="submit" value="送信">
</form>
 submitボタンを一つ置いて、それがクリックされた場合に
formの内容をPOSTで送信する。

【実現したい例】
<form name="form1 method="post">
 <a href="Next.php" onClick="???">???</a>
</form>
 formの中のリンクをクリックされた場合に、formの内容を
POSTで送信したいのですが、その実現方法がわかりません。
GETで送るという手もあり得ますが、今回はどうしてもPOST
したいのですが。

Aベストアンサー

<form name="form1" method="post" action="Next.php">
<a href="#" onClick="document.form1.submit();">???</a>
</form>

onclick内の対象がform1としてあてているので、
アンカータグは別にform内に記述しなくても大丈夫です

form内にhidden等でnameとvalueを持ったパラメータがあればそれも送られます

アンカータグから動的にvalueを変更したい場合は、
document.form1.hogename.value = 'hoge';
等をsubmit()の前に行えば可能です

ただしform内に
<input type="hidden" name="hogename" value="">
を記述する等、変更先パラメータの元を用意する必要がありますのでご注意下さい


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング