0

私はウェブページを始めていますが、問題があります。ログインフォームを開始するための情報を含むフォームを追加しました。フォームにマージンとパディングを追加しようとしましたが、それでも完全にめちゃくちゃです。めちゃくちゃになる領域のコードとフォームは次のとおりです。

<div id="body" style="width:100%;height:1000px;margin-left:5%;margin-right:5%;margin-top: 5px;">
    <div style="width:20%;display:inline-block;text-align:left;border: 2px green solid;"></div>
    <div id="paddingLeft" style="width:4%;display:inline-block"></div>
    <div style="display:inline-block; width: 50%;"></div>
    <div id="paddingRight" style="width:4%;display:inline-block"></div>
    <div id="loginTitle" style="display:inline-block; width: 20%;border:2px green solid;text-align:center;" class="style1">Login</div>

    <div style="width:20%;display:inline-block;text-align:left;height:100px;border: 2px green solid;"></div>
    <div id="paddingLeft2" style="width:4%;display:inline-block;height:100px;"></div>
    <div style="display:inline-block; width: 50%;height:100px;"></div>
    <div id="paddingRight2" style="width:4%;display:inline-block;height:100px;"></div>
    <div id="loginFormArea" style="display:inline-block; width: 20%;height:100px;border:2px green solid;text-align:center;">
        <form method="get" id="loginForm" style="height: 100%;padding:2px">
            <span class="style1" id="Username" style="display:inline-block; width:40%;">Username:</span>
            <input id="usernameInput" name="Text1" type="text" style="width:40%;display:inline-block;margin-top: 5px;height:15px" />
        </form>
    </div>
</div>
4

1 に答える 1

0

これを試して：

<div id="bodywrapper" style="width:100%;height:1000px;margin-top: 5px;">

それ以外の：

<div id="body" style="width:100%;height:1000px;margin-left:5%;margin-right:5%;margin-top: 5px;">

私の提案は次のとおりです。

  • div の id を「body」と呼ばないでください。bodyhtmlの構造要素です。
  • 左右のマージンを削除します。width:100% である必要があると既に述べているため、それにマージンを追加することは予測できません。必要に応じて、代わりにパディングを追加できます。それはあなたが探している効果を持っているかもしれません。
于 2013-06-29T19:12:23.377 に答える