How can I make my form take only a limited space?



  • XYZ 1 2 2

    Nickname Email

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.

Problem courtesy of: Ergo Proxy


ul is a block level element by default, it will take up entire horizontal space on the page, so you need to assign some fixed with to your ul element, and than use margin: auto; to center the form .

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


Solution courtesy of: Mr. Alien


Rather than applying css on the

tag and ul, you should try giving your form an id and then apply your css on that. As for eg,


XYZ 1 2 2

Nickname Email

and then apply your css

    width: 150px;

Hope it works. You can also use “%” instead of “px”.

Discussion courtesy of: AppleBud

This recipe can be found in it’s original form on Stack Over Flow .


免责声明:本文内容来源于CSS3 Recipes,已注明原文出处和链接,文章观点不代表立场,如若侵犯到您的权益,或涉不实谣言,敬请向我们提出检举。