フォームタグの横に文字を表示して、その位置を別々に決めたい

###前提・実現したいこと
フォームタグの横に文字を表示して、更にフォームを中心、◎の部分を右に表示させたい
###発生している問題・エラーメッセージ
まずフォームタグは改行してしまうため、◎を横に並べるために

<div style="display:inline-flex">

でフォームと◎を囲ったのですが、それが原因なのかその後これらの要素を自由に動かすことができません。
このような配置は不可能なのでしょうか。

###該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    </head>
6
7  <body>
8
9    <div class="line">
10      <div style="display:inline-flex">
11       
12        <div class="form">
13          <form method="get" action="hoge.php">
14            <input type="text" name="speak" id="input-text">
15            <input type="submit" value="送信" input id="submit_button">
16        </form>
17
18      </div>
19
20        <div class="btn">
21          ◎
22        </div>
23
24      </div>
25
26
27      <style>
28
29      .line{
30        text-align: center;
31       }
32
33      .btn{
34        margin-right:0px;
35       }
36       }
37
38      </style>
39
40  </body>
41</html>
42
43

###試したこと
コードのように書くととりあえずフォームを中心にする事はできたのですが、その後◎を右にすることができません。
padding-leftでフォームと離すことはできるのですが、どの画面幅から見ても右にぴったり付いた状態にしたいです。

###補足情報(言語/FW/ツール等のバージョンなど)

情報不足ですみません。画像下のように◎を移動させたいです。

退会済みユーザー

2017/04/11 12:05

どういうレイアウトにしたいか、図で示していただくことは可能でしょうか。

akabee

2017/04/11 13:19 編集

それで直るかどうかは分かりませんが、divタグを閉じるタグが一つ足りていないと思います。

mio103

2017/04/11 14:43

akabeeさん　ご指摘ありがとうございます。<div style="display:inline-flex">の閉じタグがありませんでした。修正しましたが、移動はできませんでした。

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

回答2件

HTML
1<div class="line">
2    <div class="form">
3        <form method="get" action="hoge.php">
4            <label>
5                <input type="text" name="speak" id="input-text">
6            </label>
7            <label>
8                <input type="submit" value="送信" id="submit_button">
9            </label>
10        </form>
11    </div>
12    <div class="btn">◎</div>
13</div>

CSS
1.line {
2	position: relative;
3	text-align: center;
4}
5.btn {
6	right: 0;
7	top: 50%;
8	transform: translateY(-50%);
9	position: absolute;
10}
11.form {
12	display: inline-block;
13}
14```**動くサンプル：**[https://jsfiddle.net/cvak8873/](https://jsfiddle.net/cvak8873/)

投稿2017/04/11 15:03

kei344

総合スコア69407

mio103

2017/04/11 15:22

こんなに簡単にできるとは思いませんでした。サンプルが分かりやすくて非常にありがたいです。とても勉強になりました。

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

ベストアンサー

以下のような文法エラーが存在しましたので、修正しました。

style要素はbody要素の子要素として許可されていません。
style要素の内容の末尾にある}は不要。
開始タグ、終了タグの対応が取れていない。
input[type="submit"]に付与されているinput属性は存在しない。

また、質問者さんが実現したいことは以下のように行えると思いますが、いかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        .line {
13            text-align: center;
14        }
15
16        .btn {
17            margin-right: 0px;
18        }
19
20        .form, .btn {
21            display: inline-block;
22        }
23
24        .text1 {
25            vertical-align: middle;
26        }
27    </style>
28</head>
29<body>
30<div class="line">
31    <div class="form">
32        <form method="get" action="hoge.php">
33            <label>
34                <input type="text" name="speak" id="input-text">
35            </label>
36            <label>
37                <input type="submit" value="送信" id="submit_button">
38            </label>
39        </form>
40    </div>
41    <div class="btn">
42        <span class="text1">◎</span>
43    </div>
44</div>
45</body>
46</html>

#追記

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        .line {
13            width: 100%;
14            text-align: center;
15        }
16
17        .btn {
18            float: right;
19            margin-right: 0;
20        }
21
22        .btn::after {
23            content: " ";
24            display: block;
25            clear: both;
26        }
27
28        .form, .btn {
29            display: inline-block;
30        }
31
32        .text1 {
33            vertical-align: middle;
34        }
35    </style>
36</head>
37<body>
38<div class="line">
39    <div class="form">
40        <form method="get" action="hoge.php">
41            <label>
42                <input type="text" name="speak" id="input-text">
43            </label>
44            <label>
45                <input type="submit" value="送信" id="submit_button">
46            </label>
47        </form>
48    </div>
49    <div class="btn">
50        <span class="text1">◎</span>
51    </div>
52</div>
53</body>
54</html>