文字とフォームを同じ行に入れる

html
1<div id="form">
2    <form action="" method="post" id="login">
3      <ul>
4        <li class="form_text">メールアドレスを入力してください。</li>
5        <li class="form_input"><input type="text" name="email" placeholder="メールアドレス" value="<?= isset($app->getValues()->email) ? h($app->getValues()->email) : ''; ?>"></li>
6      </ul>
7      <ul>
8        <li class="form_text">パスワードを入力してください。</li>
9        <li class="form_input"><input type="password" name="password" placeholder="パスワード"></li>
10      </ul>
11      <ul>
12        <li><p class="err"><?= h($app->getErrors('login')); ?></p></li>
13      </ul>
14
15      <div class="btn" onclick="document.getElementById('login').submit();">ログイン</div>
16      <input type="hidden" name="token" value="<?= h($_SESSION['token']); ?>">
17      <input type="hidden" name="posttype" value="login">
18      <hr>
19      <p class="btn"><a href="<?= h( SITE_URL . "/signup.php") ?>"> 新規登録はこちら</a></p>
20    </form>
21  </div>

css
1/* フォームスタイル開始 */
2#form{
3  width: 580px;
4  background: #fff;
5  margin: 0 auto;
6  margin-top: 120px;
7  padding: 25px;
8  border: solid 1.5px #000;
9  border-radius: 13px;
10 }
11.form_text{
12
13}
14.form_input{
15  text-align: right;
16}
17.form_ul{
18  display: inline;
19}
20.form_input input{
21  border-radius: 5px;
22  padding: 3px;
23}
24.signup_btn{
25  clear: both;
26}
27.caution{
28  color: #f00;
29  font-size: 11px;
30  margin: 0;
31}

というコードで

こう表示するんですが、理想は下の写真のようにしたいんです。
![
文字の横に入力フォームが来るようにしたいです。

どうしたらいいなどのコメントありましたら教えてください。

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

回答3件

ベストアンサー

flexを使ってみてはいかがでしょうか？

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        #form {
9            width: 580px;
10            background: #fff;
11            margin: 0 auto;
12            margin-top: 120px;
13            padding: 25px;
14            border: solid 1.5px #000;
15            border-radius: 13px;
16        }
17
18        .form_input {
19            text-align: right;
20        }
21
22        .form_input input {
23            border-radius: 5px;
24            padding: 3px;
25        }
26
27        ul {
28            display: flex;
29            justify-content: space-between;
30        }
31
32        .btn {
33            text-align: center;
34        }
35    </style>
36</head>
37<body>
38<div id="form">
39    <form action="" method="post" id="login">
40        <ul>
41            <li class="form_text">メールアドレスを入力してください。</li>
42            <li class="form_input"><input type="text" name="email" placeholder="メールアドレス"
43                                          value="<?= isset($app->getValues()->email) ? h($app->getValues()->email) : ''; ?>">
44            </li>
45        </ul>
46        <ul>
47            <li class="form_text">パスワードを入力してください。</li>
48            <li class="form_input"><input type="password" name="password" placeholder="パスワード"></li>
49        </ul>
50        <ul>
51            <li><p class="err"><?= h($app->getErrors('login')); ?></p></li>
52        </ul>
53
54        <div class="btn" onclick="document.getElementById('login').submit();">ログイン</div>
55        <input type="hidden" name="token" value="<?= h($_SESSION['token']); ?>">
56        <input type="hidden" name="posttype" value="login">
57        <hr>
58        <p class="btn"><a href=""> 新規登録はこちら</a></p>
59    </form>
60</div>
61</body>
62</html>

投稿2017/04/22 07:35

s8_chu

総合スコア14731

ryo-dev

2017/04/22 07:50

ありがとうございます。思っている通りにできました。 display: flex;　を調べているんですが、justify-content: space-between;　で順番を入れ替えみたいなサイトもあるんですが、この場合はどういう事を行っているんでしょうか？教えてもらえると助かります。

s8_chu

2017/04/22 07:59

justify-contentプロパティにspace-betweenを指定すると、最初のアイテムが左端、最後のアイテムが右端に配置されるので、各ul要素中のli要素が左端と右端に配置されるようになります。

ryo-dev

2017/04/22 08:02

なるほど、 .form_input{ text-align: right; } が必要なくなるということですね。

s8_chu

2017/04/22 08:03 編集

今回の場合はそういうことになると思います。

ryo-dev

2017/04/22 08:50

ありがとうございます。非常に助かりました。

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

すいません、回答というより質問になってしまいます。
ul 要素を使うことには何か理由があるのでしょうか？
自分はこのような場合 table 要素を使って以下のように書いているので気になって質問させていただきました。

HTML
1<table>
2  <tr>
3    <td class="form_text">メールアドレスを入力してください。</td>
4    <td class="form_input"><input type="text" name="email" placeholder="メールアドレス" value="<?= isset($app->getValues()->email) ? h($app->getValues()->email) : ''; ?>"></td>
5  </tr>
6</table>

投稿2017/04/22 07:55

kozuchi

総合スコア1193

ryo-dev

2017/04/22 08:00

table 要素を使ってでもいいと思うんですが、自分は他のサイトがどのようになっているかをコード見て勉強しているんですが、TwitterやFacebookなど様々なサイトのフォームやグローバルナビはリストで構成されていたので、自分も真似しています。

kozuchi

2017/04/22 08:25

回答ありがとうございます。大手サイトで実際に行われているやりかたなのですね。勉強になりました。

ryo-dev

2017/04/22 08:49

いえいえ、他に理由があるのかもしれないので、参考程度でｗ

LibertyBell3

2017/04/22 09:20

わたくしの場合、テーブルもリストも不適切だと思いますけどねぇ。

kozuchi

2017/04/22 09:52

より適切な方法があれば、あなたの回答を追加して教えていただけると助かります。

s8_chu

2017/04/22 10:01 編集

横から失礼します。 TwitterやFacebookなど様々なサイトのフォームやグローバルナビはリストで構成されていた> twitter, facebookのログインフォームにリストが使用されていることが確認できなかったのですが、どの部分で使われているのか詳しく教えていただけませんか？あと、私の場合はdivを使うほうが好きです。

LibertyBell3

2017/04/22 10:09

わたくしの場合は、dl/dt/ddの1択です。項目名に対する説明を、記入者に書いてもらうと捉えているからです。テーブルは、1対1で使うものかな？というのと、レイアウトで使うのは推奨されていない点。リストは、同一フォーマットが複数並ぶ場合で使うのが正しいと思うので、ですね。上記ソースで置き換えて考えるとクラスの指定とかも不要で、より美しいソースになるかと思います。

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

CSS
1ul li {
2    display: inline-block;
3}
4.form_text {
5    width: 250px;
6}

投稿2017/04/22 07:29

kei344

総合スコア69400

ryo-dev

2017/04/22 07:38

返信ありがとうございます。 ul li { display: inline-block; } を使うと、思っているとうりにならず、入力フォームのみが横並びになってしまいます。

kei344

2017/04/22 07:42

https://jsfiddle.net/bp2ocnhv/ 提示のHTML/CSSに回答を追加したものです。IE/Firefox/Chromeでは画像のようになりましたよ。

ryo-dev

2017/04/22 07:45

んー自分の環境ではなりませんでした。 s8_chu　さんの解答では思っているとうりなりました。別の方法として、今後活かさせてもらいます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

文字とフォームを同じ行に入れる

関連した質問