Q&A
Laravelで作っているアプリで、ボタンを横一列に表示したいのですがなぜか縦に並んでしまいます。アドバイスお願いします。
簡単にコードを書くとこんな感じです
<td> <span class="btn-group"> <form action="method_1"> <input type="hidden (省略)> <button type="submit" (省略)> </form></span> </td><form action="method_2"> <button type="submit" (省略)> </form>
1つの<td>セル内に複数個のボタンを横並びに表示したいのですが、このコードだと縦に並んでしまいます。異なるformをまたいでいるのが原因でしょうか？それぞれ異なるメソッドに処理させたいので、複数の<form>を作る必要があります。
別のやり方はありますか？
＜追記＞
お二人の方法を試してみましたがうまくいきませんでした...
この質問の投稿者はすでに退会しているため、質問者からの返信がない点にご留意ください。
回答6件
0
こうすると、一列に並びました。
HTML
1<td> 2 <span class="form-inline"> 3 <form action="method_1" class="btn-group"> 4 <input type="hidden /> 5 <button type="submit"/> 6 </form> 7 <form action="method_2" class="btn-group"> 8 <input type="submit"/> 9 </form> 10 </span> 11</td>
※input type=submitの所は buttonでも横に並びました。
投稿2015/11/01 10:20
総合スコア1768
0
改行されるのはformタグがHTML4.01の時にブロックレベル要素だった名残なのかは定かではありませんが、ブラウザデフォルトでの表示がdisplay: blockになっているのが原因ではないかと思います。
単純に
css
1.btn-group > .form { 2 display: inline; 3}
とすれば、横並びにはなるかと思いますが、class名から察するにBootstrapを使用されているかと思いますが意図した表示にはならないかと予測します。
ちゃんとチェックはしていませんが、
下記のような感じで元のBootstrapのスタイルを参考にCSSを調整してあげる必要があるかと思います。
html
1<td> 2 <span class="btn-group"> 3 <form action="method_1" class="my_btn-group-wrapper"> 4 <input type="hidden (省略)> 5 <button type="submit" class="btn btn-default"> 6 </form> 7 8 <form action="method_2" class="my_btn-group-wrapper"> 9 <button type="submit" class="btn btn-default"> 10 </form> 11 </span> 12</td>
css
1.btn-group>.my_btn-group-wrapper { 2 position: relative; 3 float: left; 4} 5.btn-group>.my_btn-group-wrapper+.my_btn-group-wrapper { 6 margin-left: -1px; 7} 8.btn-group>.my_btn-group-wrapper:first-child { 9 margin-left: 0; 10} 11.btn-group>.my_btn-group-wrapper>.btn { 12 margin: 0; 13} 14.btn-group>.my_btn-group-wrapper:first-child:not(:last-child):not(.dropdown-toggle)>.btn { 15 border-top-right-radius: 0; 16 border-bottom-right-radius: 0; 17} 18.btn-group>.my_btn-group-wrapper:not(:first-child):not(:last-child):not(.dropdown-toggle)>.btn { 19 border-radius: 0; 20} 21.btn-group>.my_btn-group-wrapper:last-child:not(:first-child)>.btn { 22 border-top-left-radius: 0; 23 border-bottom-left-radius: 0; 24}
投稿2015/09/06 18:32
総合スコア596
0
横並びにしたいブロック要素の親要素に対してdisplay:flexを指定すると、均等に要素を分割することができます。
css
1.btn-group{ 2 display:-webkit-box; 3 display:-webkit-flex; 4 display:-ms-flexbox; 5 display:flex 6} 7.btn-group form{ 8 -webkit-box-flex: 1; 9 -webkit-flex: 1; 10 -ms-flex: 1; 11 flex: 1 12}
ベンダプレフィックスの生成はpleeeaseかautoprefixerが利用できます。
このプロパティはIE10、Android4.1以上で利用できます。
投稿2015/11/01 09:53
編集2015/11/01 09:56
総合スコア454
0
Bootstrap3自体のformのインライン化はform-inlineクラスで行うことが出来ます。
ボタンによってURLを変える方法はいくつか有りますが例えば。。。こんな感じとかですね
html
1<form name="form" action="javascript:void(0);"> 2 <input type="submit" onClick="return url1(this)" value="送信１"> 3 <input type="submit" onClick="return url2(this)" value="送信２"> 4</form>
js
1function url1(obj) { 2 obj.form.action="./url1.php" 3 obj.form.submit(); 4} 5 6function url2(obj) { 7 obj.form.action="./url2.php" 8 obj.form.submit(); 9}
投稿2015/11/01 09:25
総合スコア2158
0
Bootstrap3では、btn-groupの中に<form>を入れることは想定されていないようですね。
以下のCSSを追加すると、ボタンは横並びになります。
css
1.btn-group form { 2 display: inline; 3}
投稿2015/10/13 09:44
編集2015/10/13 09:47
総合スコア72
0
すみません、スタイルシート的なカッコの良いやり方ではありませんが、
以下の様にすると、とりあえずはボタンが横に並びます。
HTML
1<html> 2<head> 3<script> 4var postAction={"1": "method_1", "2": "method_2"}; 5function btnGroupSubmit(d){ 6 obj=document.forms["btm-group"]; 7 obj.action=postAction[d]; 8 obj.submit(); 9} 10</script> 11</head> 12 13<body> 14<table> 15<td> 16 <span class="btn-group"> 17 <form name="btm-group"> 18 <button type="button" value="hidden1" onclick="btnGroupSubmit(1)"> 19 <button type="button" value="hidden2" onclick="btnGroupSubmit(2)"> 20 </form> 21 </span> 22</td> 23</table> 24</body> 25</html>
投稿2015/09/06 21:52
総合スコア1768
この質問の投稿者はすでに退会しているため、質問者からの返信やベストアンサーの選定がない点にご留意ください。
あなたの回答
tips
プレビュー
