0

私はhtmlを初めて使用するので、ばかげた間違いを犯しているかどうかを理解してください。Facebookのようなログインウィンドウを作成しようとしています。次のようなログインウィンドウを作成しました。 ここに画像の説明を入力

ここでは、2 行のテーブルを取得しました。最初の行は、2 つのテキスト ボックスとログイン ボタンをレンダリングします。2 つ目は、「remember me」と「forgor password」リンクで構成されています。問題は、高さ12pxの2行目と「remember me」というテキストを、上の画像で少し見下ろすのではなく、チェックボックスの正確な中央に表示することです。外観を確認するために一時的なインライン css をいくつか作成しました。このセクションのコードは次のとおりです。

 <table style="float:left;margin-top:1%">
                    <tbody>
                        <tr>
                                <td style="padding-right: 0px;background:blue;">
                                    <div class="uiStickyPlaceholderInput uiStickyPlaceholderEmptyInput">
                                        <input type="text" style=" width:110px;text-align:center;"class="inputtext _5aju" id="email" name="email" placeholder="E-mail" tabindex="1" value="" aria-label="Email or Phone">
                                    </div>
                               </td>

                               <td style="padding-right: 0px;background:red">
                                     <div class="uiStickyPlaceholderInput">
                                       <input type="password" style=" width:105px;text-align:center;float:right;" class="inputtext _5aju" id="pass" name="pass" placeholder="Password" tabindex="2" value="" aria-label="Password">
                                     </div>
                                </td>

                                <td >
                                     <button value="1" class="_42ft _42fu _5ajv selected _42g- btn btn-primary btn-small" id="loginbutton" tabindex="4" type="submit">Log In</button>
                                </td>
                         </tr>
                         <tr height="12" style="background:pink;">
                                <td height="10">
                                    <span class="_5ajw">
                                        <div>   
                                            <label class="_5bb4">
                                                 <input id="persist_box" style="height:10px;background:yellow" type="checkbox" name="persistent" value="1" tabindex="3">
                                                 <span style="font-size:10px;margin-top:-5px;background:yellow">Remember me</span>
                                            </label>
                                            <input type="hidden" name="default_persistent" value="0">
                                         </div>
                                   </span>
                                 </td>

                                 <td  style="margin-top:-1%;">
                                     <a class="_5ajx" rel="nofollow" href="https://www.google.com" 
                                     style="font-size:10px;paddig-left:2px;margin-top:-1%;background:yellow;">Forgot your password?</a>
                                 </td>
                         </tr>
                       </tbody>
                   </table>

それで、上記の達成のためにcssを調整する方法を教えてください。前もって感謝します。. .

4

2 に答える 2

0

理想的には、レイアウト目的でテーブルを使用しないでください。

あなたの例では、次のように右マージンだけを残して、チェックボックスの周りのマージンを削除してみます。

<input type="hidden" name="default_persistent" value="0" style="margin: 0 5px 0 0;>

これでうまくいくはずです。

于 2013-10-18T10:27:19.643 に答える