2


0

テーブル内の2つの入力ボックスが何であっても、送信ボタンが並ばない

これは通常、単純なタスクです。 メール入力、パスワード入力、および送信ボタンを備えたシンプルなサインインフォームがあります。すべて水平線です。 何時間もスタイルを取り去り、さまざまな構造を試した後、ボタンはボックスよりも少し下に座っています。 関与する要素を絶対に配置したか、背景画像を持つdivにその要素が配置されているためだと考えています。

前もって感謝します。

スクリーンショットは次のとおりです。image:https://i.stack.imgur.com/8LqDo.png [alt text]

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

           " onclick="clearify(this);" />

"onfocus =" clearify(this); "/>

link:password_forget.php [パスワードをお忘れですか?]

または、http://www.cysticlife.org/Blogs_future.php [blogs]およびhttp://www.cysticlife.org/Questions_future.php[questions]を参照してください。

ここに関連する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;}

2 Answer


3


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

ただし、位置を正確に合わせるには、上部のパディングを数ピクセル追加する必要がある場合があります。

編集:

そのための新しいルールが必要になるようです。

#sign_in_table table tr td.sign_submit { vertical-align: bottom; }


2


私が気づいたいくつかのこと:

#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 これを単純化できます。 これらのセレクターは複雑すぎて、ページのレンダリングとコードの読み取りの両方を遅くします(https://developer.mozilla.org/en/Writing_Efficient_CSS[Writing Efficient 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入力のルールが重複していることがあります。 エラーの追跡が困難になるのを避けるために、いずれかを削除してください。

{空} 9。 PHPコードを見ると、$ _ GETのコンテンツをページに直接埋め込んでいることがわかります。 これは危険とみなされ、XSSを避ける​​ためにhtmlentitiesを使用してこれを常にサニタイズする必要があります。

編集:

サイトを見た後、単に .sign_submit to bottom fixes the problem in my Opera browser:

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