I just did an UL list with 4 LI elements and I did this in CSS:

ul li {
width:200px;/*problem*/
display:inline;
color:white;
background-color:red;
border-radius:5px;
font-family:verdana;
font-size:2em;
box-shadow:0 7px 0 #600;
padding:5px 20px;
margin:15px;
}

The problem is that the width property has no influency with the width of the li element, and if I want to do it larger I have to add padding to the right and left but that is not good because there are different lenghts in each box since some have more letters than others.

Why is that happening?

Thanks,

In order to set block type properties (i.e. width), you'll have to set the display to inline-block on the li element

<!-- language-all: lang-css -->

ul li {
    display:inline-block;
}

The selector above will only affect the li element. If you want to style child elements, like a button, you'll also have to set the width property there.

ul li button {
    width:200px;
}

fiddle