ul not moving to the right

Question

Why does this list not move to the topright of the screen?

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 10px;
  right: 10px;
  float: right;
}

li { 
  display: inline-block;
  margin-right: 10px;
}

I don't know why float:right; doesn't fix this

Answer 1

Because by default the ul is 100% wide, so float:right has no visible effect on it since it fills the whole width of the container. The lis are left-aligned inside the ul.

You can add a width setting to the ul (i.e. 50%, or a fixed pixel value), then you'll see the effect of the float:right.

Answer 2

I make it work with this:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 10px;
  right: 10px;
}
        
li { 
  display: inline-block;
  margin-right: 10px;
}

(removed the float right)

Make sure that you include your styles on the page. For example, check if your list has dots before every item and if is it inlined or one under another.

If you have dots before every item and the items are one under another you probably didn't include your CSS file correctly.

If you think you're including your styles correctly you can check on which level you added the ul element. If you have nested it in a few other elements I suggest you get it out as you want to put it on the very top right of the page.