CSS List Item Width/Height Does Not Work

CSS list item width/height does not work

Declare the a element as display: inline-block and drop the width and height from the li element.

Alternatively, apply a float: left to the li element and use display: block on the a element. This is a bit more cross browser compatible, as display: inline-block is not supported in Firefox <= 2 for example.

The first method allows you to have a dynamically centered list if you give the ul element a width of 100% (so that it spans from left to right edge) and then apply text-align: center.

Use line-height to control the text's Y-position inside the element.

why does not height or width work with element a inside div?

Your a tag should be a block element. a tag by default is inline element.

Why doesn't setting the width of a horizontal list item working?

Its display inline-block

ul {  list-style-type: none;  width: 100%;  padding: none;}
ul li {  display: inline-block;}
#item1 {  width: 50%;}

<ul><li id="item1">hello</li><li id="item2">world</li></ul>

css width and height not working

One thing you should look into is to add a CSS reset or normalize.css into your project (not both). You can Google and grab the latest from github and the benefit is that it makes browsers render all elements more consistently and in line with modern standards. This will make your life much happier not having to constantly deal with all of these pixel inconsistencies across different browsers and media devices.

Then consider this box sizing CSS snippit:

html {
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;}
*,
*::before,
*::after {
    -webkit-box-sizing: inherit;
       -moz-box-sizing: inherit;
            box-sizing: inherit;
}

https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/

This will make the padding and width work more intuitively, or the way you would expect. My recommendation would be to add normalize and make sure it has the box-sizing: border-box reset, and then see how your width/height is working out for you. This might fix your problem outright.

But specifically to answer your question, the most likely reason is that if you want an element to be 216px with padding of 5px, you would set the width

element {
width: 206px; /* 216 - (5px padding + 5px padding) = 206px */
padding: 5px /* top: 5px, right: 5px, bottom: 5px, left: 5px; */
}

In summary, you need to add the padding (5px on the left and 5px on the right) to the overall width.

CSS width element not doing anything

Try adding display: inline-block; to your .schedule definition. <a> elements are by default display: inline; which makes the CSS width modifier not do anything.

.schedule {
    ..
    display: inline-block;
}

https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

How to make the li item width fit the text length?

make a .custom_li class and give

.custom_li{
   display:inline-block;
}

EDIT

To force same size, i'll suggest using max-width and place it under some media-query

li{
    display: inline-block;
    max-width:50%; /* limit width */
    word-break:break-all; /* wrap extended text*/
    border:1px solid red /* demo */
}

demo here

some optional things

width and height doesn't seem to work on :before pseudo-element

Note: The ::before and ::after pseudo-elements are actually laid display: inline; by default.

Change the display value to inline-block for the width & height to take effect while maintaining inline formatting context.

a.infolink::before {
    content: '?';
    display: inline-block;
    background: blue;
    color: white;
    width: 20px;
    height: 20px;
}

http://jsfiddle.net/C7rSa/3/

CSS List Item Width/Height Does Not Work