2

HTMLコード

<ul id="cool">
    <li>
        <form action="/send.php" method="post">
            <p id="submit">XYZ
                <select name="server">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="2">2</option>
                </select>
                <br />
                <br />Nickname
                <input type="text" name="Nickname" maxlength="16" required="required" autofocus="autofocus" />Email
                <input type="email" name="Email" maxlength="254" required="required" />
                <input type="submit" value="Sumbit">
            </p>
        </form>
    </li>
</ul>

CSS コード

#submit {
    width: 125px;
    height: 135px;
    margin: 0 auto 20px;
    ul {
        list-style-type: none;
    }
    #cool:hover {
        background-image: url(nav-bg.png);
        background-repeat: no-repeat;
    }

:hover を使用してコードに背景を配置しようとした後、中央に配置されている間にフォームの幅がページ全体に拡大することに気付きました。ul{} で幅を使用しようとしましたが、フォームが左側に配置されました。だから私の質問は、フォームがページ全体に展開されないようにする方法ですか?

私のコードをすみません。

4

2 に答える 2

4

ulはblockデフォルトでレベル要素であり、ページの水平方向のスペース全体を占めるため、要素にfixedwith を割り当ててから、を中央に配置する必要があります。ulmargin: auto;form

ul {
    list-style-type: none;
    width: 250px; /* Approximately */
    margin: auto;
}

デモ

于 2013-09-23T08:43:04.143 に答える
1

にcssを適用するのではなく、

タグとul、フォームにIDを与えてから、それにCSSを適用してみてください。例えば、

<form action="/send.php" method="post" id="submit">
  <p>
    XYZ
 <select name="server">
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="2">2</option>
     </select> <br /> <br />
  Nickname
     <input type="text" name="Nickname" 
     maxlength="16" required="required" autofocus="autofocus" />
     Email
    <input type="email" name="Email"
    maxlength="254" required="required" />
    <input type="submit" value="Sumbit">
    </p>
    </form>

次に、CSSを適用します

   #submit
   {
    width: 150px;
    align:center;
   }

それがうまくいくことを願っています。「px」の代わりに「%」を使用することもできます。

于 2013-09-23T08:47:04.740 に答える