Question

HTML CODE

<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级元素，它会占用页面上的整个水平空间，因此您需要为fixed分配一些ul元素，而不是使用margin: auto;来居中form。

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

Demo

Answer 2

不是在

标签和ul上应用css，而应该尝试为表单提供一个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”。

如何让我的表单只占用有限的空间？

2 个答案: