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

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

ただいまの
回答率

88.91%

ログインボタンが適切な位置に設置されない

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 164

ypk

score 41

初めまして。
現在HTMLの学習をしているものです。

現在、ログインフォームを作成したのですが、写真のように入力フォームとログインボタンがずれてしまいます。

イメージ説明

私としては、「パスワード」の文字の下にログインボタンの左端が来るようにして、入力フォームとボタンの左端でそろえたいのですが、うまくいきません。

なぜ、このようになってしまうのか、どのようにすればこの状態を解決できるのか、教えていただけると嬉しいです。
どうぞよろしくお願いいたします。

私のソースコード

@charset "UTF-8";
.header{
    top:0;
    left:0;
    float:left;
    position:fixed;
  height:100px;
  width:100%;
  background-color:#808080;
  padding:10px;
}
.header_logo{
    float:left
}
.header-logo{
    padding-top:10px;
}
.header_logo_font{
    color:white;
}
.center{
    align:center;
}

.login{
    float:left;
    margin-left:625px;
}

li{
    padding:30px;
    list-style:none;
    float:left;
}
footer{
width: 100%;
position: absolute;
bottom: 0;
}
.break{
    line-height:40px;
}
.body{
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="exam.LoggerTester" %>
<% request.setCharacterEncoding("UTF-8"); %>
<% String loginErrorMessage = (String)request.getAttribute("loginErrorMessage"); %>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
            <title>書籍管理システム-<ログイン></title>
            <link rel="stylesheet" href="header.css">
    </head>

<div class="container">
    <header><div class="header">
<div class="header_logo_font">
<p>書籍管理システムログイン</p>
</div>
</div><hr>
</header>
    <body>

    <%
     LoggerTester lt = new LoggerTester();
     lt.outActionLog("login.jsp", "処理開始");
    %>

        <div class="body">
        <div class="content">
          <div align="center">
              <table border="0">
                  <form action="Login" method="POST">

                  <div class="break">
                  <font color="#fff">空欄作成のために使用。画面に映りません。</font>
                  </div>

                  <div class="break">
                  <font color="#fff">空欄作成のために使用。画面に映りません。</font>
                  </div>

                <center>
                   <% if(loginErrorMessage != null){ %>
                <p><font color="red"><%= loginErrorMessage %></font></p>
                <%} %>
                </center>
                  <div class="break">
                  <font color="#fff">空欄作成のために使用。画面に映りません。</font>
                  </div>

                     <p>ユーザーID
                     <input class="center" type="text" name="loginid" value="" size="24">
                     <p>パスワード
                    <input class="center" type="password" name="userpassword" value="" size="24">
                    <br><br>
                     <input class="login" type="submit" name="login" value="ログイン"></div>


                  </form>
              </table>

    </div>
    </div>
    </div>


    </body>

</div>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2020/07/08 18:20

    「CSS」として質問したいのでしたらjspではなくブラウザに表示されたhtmlを提示してください。

    キャンセル

回答 1

checkベストアンサー

+1

ボタンの input の後の div タグに応じたオープンタグがありませんからうまく揃えないと思います。

                     <div> <!-- このdivタグはありませんでした -->
                     <p>ユーザーID
                     <input class="center" type="text" name="loginid" value="" size="24">
                     <p>パスワード
                    <input class="center" type="password" name="userpassword" value="" size="24">
                    <br><br>
                     <input class="login" type="submit" name="login" value="ログイン">
                     </div> <!-- このdivのオープンタグはありませんでした -->

コードにHTML標準にあってないところがありますので、紹介したいと思います。

<div class="container">
  <header>
  </header>
  <body>
  </body>
</div>

この構成は標準にあっていません。div.container は body タグが含めません。mainタグを使ってください。

<div class="container">
  <header>
  </header>
  <main>
  </main>
</div>

コードがモダンになれる点を紹介したいと思います。

センタリング

<div align="center">
  <table border="0">
    <form>
    </form>
  </table>
</div>

formをセンターにしたい時は、widthを決めてmargin: auto;をつけてください。

<form style="width: 35em; margin: auto;">
</form>

空欄

<div class="break">
<font color="#fff">空欄作成のために使用。画面に映りません。</font>
</div>
<div>
</div>
.break{
    line-height:40px;
}

この方法に敬意を払いたいが、marginを用いたら楽になります。

<div style="margin-top: 40px">
</div>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/07/09 12:03

    floatを削除し、margin-leftだけにしたところ無事に動きました!お手数をおかけしました。ありがとうございました。ちなみにChromeを使用しています、Inspectorについても、調べてみます。ありがとうございます。

    キャンセル

  • 2020/07/09 12:07

    お役に立てて幸いです。

    キャンセル

  • 2020/07/09 12:54

    また機会がございましたらどうぞよろしくお願いいたします。
    ありがとうございました。

    キャンセル

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

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

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