2

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 Code

#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;
    }

So after trying to put a background on the code using :hover I noticed that the form width expands on the whole page while it is centered.I tried using width in the ul{} but that put my form on the left. So my question is, how to make the form not expand on the whole page?

Excuse my code, I'm only a beginner, anything else I could provide you to assist you in assisting me (irony :P) please tell me.

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

而不是在

tag 和 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 回答