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

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

ただいまの
回答率

90.40%

  • HTML

    9957questions

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

  • CSS

    6479questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4454questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2279questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

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

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 1,623

ryohasegawa

score 108

<div id="form">
    <form action="" method="post" id="login">
      <ul>
        <li class="form_text">メールアドレスを入力してください。</li>
        <li class="form_input"><input type="text" name="email" placeholder="メールアドレス" value="<?= isset($app->getValues()->email) ? h($app->getValues()->email) : ''; ?>"></li>
      </ul>
      <ul>
        <li class="form_text">パスワードを入力してください。</li>
        <li class="form_input"><input type="password" name="password" placeholder="パスワード"></li>
      </ul>
      <ul>
        <li><p class="err"><?= h($app->getErrors('login')); ?></p></li>
      </ul>

      <div class="btn" onclick="document.getElementById('login').submit();">ログイン</div>
      <input type="hidden" name="token" value="<?= h($_SESSION['token']); ?>">
      <input type="hidden" name="posttype" value="login">
      <hr>
      <p class="btn"><a href="<?= h( SITE_URL . "/signup.php") ?>"> 新規登録はこちら</a></p>
    </form>
  </div>
/* フォームスタイル開始 */
#form{
  width: 580px;
  background: #fff;
  margin: 0 auto;
  margin-top: 120px;
  padding: 25px;
  border: solid 1.5px #000;
  border-radius: 13px;
 }
.form_text{

}
.form_input{
  text-align: right;
}
.form_ul{
  display: inline;
}
.form_input input{
  border-radius: 5px;
  padding: 3px;
}
.signup_btn{
  clear: both;
}
.caution{
  color: #f00;
  font-size: 11px;
  margin: 0;
}


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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+2

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

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <style type="text/css">
        /* フォームスタイル開始 */
        #form {
            width: 580px;
            background: #fff;
            margin: 0 auto;
            margin-top: 120px;
            padding: 25px;
            border: solid 1.5px #000;
            border-radius: 13px;
        }

        .form_input {
            text-align: right;
        }

        .form_input input {
            border-radius: 5px;
            padding: 3px;
        }

        ul {
            display: flex;
            justify-content: space-between;
        }

        .btn {
            text-align: center;
        }
    </style>
</head>
<body>
<div id="form">
    <form action="" method="post" id="login">
        <ul>
            <li class="form_text">メールアドレスを入力してください。</li>
            <li class="form_input"><input type="text" name="email" placeholder="メールアドレス"
                                          value="<?= isset($app->getValues()->email) ? h($app->getValues()->email) : ''; ?>">
            </li>
        </ul>
        <ul>
            <li class="form_text">パスワードを入力してください。</li>
            <li class="form_input"><input type="password" name="password" placeholder="パスワード"></li>
        </ul>
        <ul>
            <li><p class="err"><?= h($app->getErrors('login')); ?></p></li>
        </ul>

        <div class="btn" onclick="document.getElementById('login').submit();">ログイン</div>
        <input type="hidden" name="token" value="<?= h($_SESSION['token']); ?>">
        <input type="hidden" name="posttype" value="login">
        <hr>
        <p class="btn"><a href=""> 新規登録はこちら</a></p>
    </form>
</div>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/22 16:50

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

    キャンセル

  • 2017/04/22 16:59

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

    キャンセル

  • 2017/04/22 17:02

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

    キャンセル

  • 2017/04/22 17:03 編集

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

    キャンセル

  • 2017/04/22 17:50

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

    キャンセル

+1

ul li {
    display: inline-block;
}
.form_text {
    width: 250px;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/22 16:38

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

    キャンセル

  • 2017/04/22 16:42

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

    キャンセル

  • 2017/04/22 16:45

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

    キャンセル

0

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

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

 

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/22 17:00

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

    キャンセル

  • 2017/04/22 17:25

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

    キャンセル

  • 2017/04/22 17:49

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

    キャンセル

  • 2017/04/22 18:20

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

    キャンセル

  • 2017/04/22 18:52

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

    キャンセル

  • 2017/04/22 19:01 編集

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

    あと、私の場合はdivを使うほうが好きです。

    キャンセル

  • 2017/04/22 19:09

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

    キャンセル

同じタグがついた質問を見る

  • HTML

    9957questions

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

  • CSS

    6479questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4454questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2279questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。