Button width issue - html

Question

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,

Answer 1

In order to set block type properties (i.e. width), you'll have to set the display to inline-block on the li element
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

Answer 2

Since you asked why this is happening - inline elements width is determined by their content so your width css has no effect. Setting the item to display as inline-block or block will make it determine it's width based on your styles rather than the content.

Answer 3

All HTML elements are rendered in one of the following ways:
Block: Takes up the full width available, or a defined width, with a new line before and after. This can be forced using display:block;
Inline: Takes up only as much width as it needs, based on its contents, and does not force new lines. This can be forced using display:inline;
Not displayed: Some tags, like <meta />, <style> and <link> are not visible. This can be forced using display:none;
Inline elements can not have a defined width. Only block element can do this. There is a way to have a block level element to be inline by using display: inline-block. This is much like an emoticon or an image would be displayed in a word document. You can define a width because it is a block, but it will fall inline with the rest of the elements if no width is set. Inline blocks will not respect line-heights, meaning that if an image is inline with text it will adjust the line-height to allow itself to fit inline.

Answer 4

You should use display: inline-block not display: block;
DEMO http://jsfiddle.net/kevinPHPkevin/SyBBu/
ul li {
width:200px;/*problem*/
display:inline-block;
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;
}