テーブル内に 2 つの入力ボックスがあるにもかかわらず、送信ボタンが整列しない

StackOverflow https://stackoverflow.com/questions/3823713

質問

通常、これは簡単なタスクです。電子メール入力、パスワード入力、送信ボタンがすべて水平線に並んだシンプルなサインイン フォームがあります。何時間もスタイルを外し、さまざまな構造を試した結果、ボタンはボックスより少し低い位置に収まりました。関連する要素を絶対に配置したか、背景画像のある div に配置されていることが原因である可能性があると考えています。

前もって感謝します。

スクリーンショットは次のとおりです。alt text

HTML 構造は次のとおりです。

<div id="new_home_join">
     <div id="sign_up_home">
      <div id="sign_in_table">
        <form name="sendEmail" action="Home.php" method="post">
        <table>
         <tr>
          <td class="sign_in_input">
           <input type="text" name="email" class="text" value="Email<?php if($formError == "true") { echo  stripslashes($_POST['name']); } ?>" onclick="clearify(this);" /> 

          </td>
          <td class="sign_in_input">
           <input type="password" name="password" class="text" value="Password<?php if($formError == "true") { echo stripslashes($_POST['']); } ?>" onfocus="clearify(this);" />
          </td>
          <td class="sign_submit">
           <input type="hidden" name="return" value="<?php echo $_GET['return']; ?>" />
           <input type="submit" name="subSignIn" value="Login" />

          </td>
         </tr>
        </table>
       </form>
        <div class="forget_pw">
         <a href="password_forget.php"> 
          Forgot Password?
         </a>
        </div>
       </div>

       <div id="not_member">
        <a href="http://www.cysticlife.org/signUp.php">
         <span style="color:#808080;font-size:18px;">Not a CysticLife member?</span><br /> Join our community today!
        </a>
       </div>
       <div id="browse">
        or just browse the
        <a href="http://www.cysticlife.org/Blogs_future.php">blogs</a> and <a href="http://www.cysticlife.org/Questions_future.php">questions</a>
       </div>
      </div>
      <div id="fuss">
       <a href="http://www.cysticlife.org/what-is-cysticlife.php">What is the CysticLife community?</a>
      </div>
     </div>

関連する CSS は次のとおりです。

#new_home_join {background:url(images/join_today.png) no-repeat;width:333px; height:200px;margin:0px 0px 0px 0px;}

#sign_up_home {width:343px;}

#sign_in_table {width:338px;margin:0px auto 0px auto;position:relative;}

#sign_in_table {width:338px;margin:0px auto 0px auto;position:relative;}

#sign_in_table table tr td.sign_in_input {padding:40px 0px 5px 10px;}

#sign_in_table table tr td.sign_in_input input {width:105px; border:1px #999999 solid;padding:2px;font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#666666;}

#sign_in_table table tr td.sign_submit input{width:72px; height:34px; background:url(images/search_button.png) no-repeat; font-style:Arial,Helvetica, sans-serif; color:#333333; font-size:11px;padding:5px 0px 10px 0px; border:0;}


.forget_pw {margin:5px 0px 0px 0px;position:absolute; top:62px; right:82px;}

.forget_pw a {padding:10px;font-family:Arial,Helvetica, sans-serif; font-size:10px; color:#626262; text-decoration:none;}

.forget_pw a:hover {color:#F37336;}

#sign_in_table table tr td.sign_submit input{width:72px; height:34px; background:url(images/search_button.png) no-repeat; font-style:Arial,Helvetica, sans-serif; color:#333333; font-size:11px;padding:5px 0px 10px 0px; border:0;}

#join_us {margin:0px auto 40px 60px; font-family:Arial,Helvetica, sans-serif; font-size:12px; color:#F37336; font-weight:bold; text-align:left;padding:0px 50px 80px 0px;float:right}

#join_us a {font-family:Arial,Helvetica, sans-serif; font-size:14px; color:#999999;text-decoration:none;}

#join_us a:hover {color:#F37336;}

#fuss {margin:25px auto 0px auto; font-family:Arial,Helvetica, sans-serif; text-align:center; color:#666666; font-size:12px;}

#fuss a {font-family:Arial,Helvetica, sans-serif; font-size:12px; color:#666666; text-decoration:none;}

#fuss a:hover {color:#FF4701;}
役に立ちましたか？

解決

私が気づいたことがいくつかあります:

#sign_in_table table tr td.sign_in_input { ... }

#sign_in_table table tr td.sign_in_input input { ... }

#sign_in_table table tr td.sign_submit input{ ... }

1.これを簡略化することができます。これらのセレクターは複雑すぎるため、ページのレンダリングとコードの読み取りの両方が遅くなります (「 効率的なCSSの書き方):

.sign_in_input  { ... }
.sign_in_input input { ... }
.sign_submit input { ... }

上記はコードと同じことを行います。さらに、HTML の構造には依存しません。

2.プロパティを見ると、テーブルのすべてのセルに異なるパディングがあることがわかります。

.sign_in_input {padding:40px 0px 5px 10px;}

.sign_submit { /* No rules, just a default padding */ }

垂直方向のパディングが同じであることを確認する必要があります。

.sign_submit { padding-top: 0px; padding-bottom: 0px; }

3.送信ボタンには定義された高さがありますが、入力には定義されていません。高さが入力の高さより高い場合は、垂直方向を中央に揃える必要があります。

.sign_submit  { line-height: 34px;  /* = Height of the input */ vertical-align: middle; }
.sign_in_input input { height: 30px; /* Better specify the height of the input fields as well*/ /* ... */ }

4.送信ボタンの画像の上部に白/透明のストライプがないことを確認してください。

5.すべての垂直入力マージンを 0 に設定していることを確認してください。

.sign_submit input { margin-top: 0px; margin-bottom: 0px; }

6.非表示の入力フィールドを送信ボタンの後に移動してみてください。何も変更すべきではありませんが、それは誰にもわかりません:)

7。上記のどれも役に立たない場合は、マイナスマージンハックを使用することもできます (ただし、これは実際には良い解決策ではありません)。

.sign_submit input { margin-top: -5px; }

8.たまたま .sign_submit 入力のルールが重複しています。追跡が難しいエラーを避けるために、そのうちの 1 つを削除してください。

9.PHP コードを見ると、$_GET コンテンツがページに直接埋め込まれていることがわかります。これは危険であると考えられているため、XSS を回避するために htmlentities を使用してこれをサニタイズする必要があります。

編集：

サイトを確認した後、.sign_submit の垂直方向の配置を下に変更するだけで、私の Opera ブラウザの問題は解決しました。

.sign_submit  { vertical-align: bottom; /* Instead of middle */ }

他のヒント

vertical-align: bottomにtd.sign_submitを追加します。これは、現在いるglobal.cssにbaselineに設定されています。

その後、あなたはかかわらず、位置決めが正確に正しい得るために、トップのパディングの数ピクセルを追加する必要があります。

の編集の

は、あなたのように見えますが、そのための新しいルールが必要になります 

#sign_in_table table tr td.sign_submit { vertical-align: bottom; }
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top