2つの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を変更したくなくて、それ以外のものを試行錯誤したいのですが、うまくいきませんでした。
どうぞよろしくアドバイスをお願いいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

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;も名前は聞いたことがあるのですが、実際にこう使うんだということがわかりました。

行動規範の内容に同意します

divとformの親子関係を逆にしていますが，以下のようなコードはいかがでしょうか．

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}