如何使我的表格只占用有限的空間？

Question

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 {}中使用width，但是這將表單放在了左邊。 所以我的問題是，如何使表格不在整個頁面上展開？

打擾一下，我只是一個初學者，我可以提供其他任何幫助您的幫助（諷刺：P），請告訴我。

Answer 1

ul默認是block級元素，它將占據頁面上的整個水平空間，因此您需要為ul元素分配一些fixed ，然后使用margin: auto; 使form居中。

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

演示

Answer 2

而不是在

標記和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”。