質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

53759閲覧

2つのsubmitボタンを横並びにしたい

yoshipu

総合スコア115

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2016/10/14 15:42

文字化けしますが、submitボタンがふたつ縦並びになっています

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <link rel="stylesheet" type="text/css" href="test.css"> 5 </head> 6 <body> 7 <div id="wrapper"> 8 <div id="confirm_text"> 9 <div>text</div> 10 <div>text</div> 11 <div>text</div> 12 <div>text</div> 13 </div> 14 <form action="" method="post"> 15 <div class="form_confA"> 16 <input type="submit" name="done" value="送信" id="submit_button"> 17 </div> 18 </form> 19 20 <form action="contactito.php" method="post"> 21 <div class="formB"> 22 <input type="submit" name="to_correct" value="修正" id="submit_button"> 23 </div> 24 </form> 25 </div> 26 </body> 27</html>

css

1@charset "UTF-8"; 2 3#wrapper{ 4 max-width: 1000px; 5 margin: 0 auto; 6 padding: 0; 7} 8form{ 9 max-width: 290px; 10 margin: 0 auto; 11} 12 13input{ 14 width: 260px; 15 border-radius: 10px; 16 padding: 10px; 17 margin-bottom: 5px; 18} 19 20 21#submit_wrap{ 22 text-align: center; 23 width: 96%; 24} 25 26#submit_button{ 27 border-radius: 20px; 28 width: 8em; 29 margin-top: 10px; 30 margin-bottom: 10px; 31} 32 33/*確認画面*/ 34 35#confirm_text{ 36 line-height: 2em; 37 color: #645A46; 38 width: 40%; 39 margin: 0 auto; 40} 41 42#confirm_text p{ 43 margin: 0; 44} 45 46.form_confA{ 47 width: 50%; 48} 49 50 51.form_confB{ 52 width: 50%; 53}

このフォームは送信ボタンを押された後の確認画面を想定しています。
ふたつのボタンを横並びにしたいのですが、どうしても縦並びになってしまいます。
formの領域が影響していることはわかっているのですが、前ページの入力フォームで使用していて可能な限りCSSを変更したくなくて、それ以外のものを試行錯誤したいのですが、うまくいきませんでした。
どうぞよろしくアドバイスをお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

form自体にdisplay: inline-block;をかけるやり方もありますよ~

html

1<div class="form_conf"> 2 <form action="" method="post"> 3 <input type="submit" name="done" value="送信" id="submit_button"> 4 </form> 5 <form action="contactito.php" method="post"> 6 <input type="submit" name="to_correct" value="修正" id="submit_button"> 7 </form> 8</div>

css

1.form_conf { 2 text-align: center; 3} 4.form_conf form { 5 display: inline-block; 6 margin: 0 10px; 7}

投稿2016/10/14 16:50

編集2016/10/14 16:51
gin

総合スコア2722

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoshipu

2016/10/15 21:47

ありがとうございます。すごく助かりました。display:inline-block;も名前は聞いたことがあるのですが、実際にこう使うんだということがわかりました。
guest

0

divformの親子関係を逆にしていますが,以下のようなコードはいかがでしょうか.

html

1<div class="form-container"> 2 <div class="form-a-container"> 3 <form action=""> 4 <input type="submit"> 5 </form> 6 </div> 7 <div class="form-b-container"> 8 <form action=""> 9 <input type="submit"> 10 </form> 11 </div> 12</div>

css

1.form-a-container, 2.form-b-container { 3 float:left; 4 width:50%; 5} 6 7.form-a-container form, 8.form-b-container form { 9 width:100%; 10 text-align:center; 11} 12.form-container:after { 13 clear:both; 14 content:""; 15 overflow:hidden; 16 clear:both; 17}

投稿2016/10/14 15:57

musou1500

総合スコア68

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoshipu

2016/10/15 22:09

ありがとうございます。やり方がいろいろあるんだなと思いました。疑似要素というのを初めて知りました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問