CSS:试图将按钮移到右侧。仅适用于 "Position: absolute"，但它打破了我的水平列表

Question

CSS:

ul{
  list-style-type: none;
  padding: 0;
  right: 0px;
  top: 0px;
}
#btn{
  float: left;
  margin-left: 1px;
  text-transform: uppercase;
  padding: 10px;
  border: none;
  background: #22;
  cursor: pointer;
  }
    #btn:hover{
      background: #333;
      color: #fff;
      transition: all .2s ease-in-out;
      }
    #btn.fb:hover{
      background: #3b5998;
      }
    #btn.tw:hover{
      background: #55ACEE;
      }
    #btn.yt:hover{
      background: #b31217;
      }

HTML

<ul>
      <li>
        <button class='fb' id='btn'>Facebook</button>
      </li>
      <li>
        <button class='tw' id='btn'>Twitter</button>
      </li>
      <li>
        <button class='yt' id='btn'>Youtube</button>
      </li>
    </ul>

只有将“Position: Absolute”放在那里时才会向右移动，我试着去检查 w3schools，但他们说的是同样的事情 (http://www.w3schools.com/css/css_positioning.asp)。老实说，我不知道出了什么问题，希望你们能提供帮助。

Answer 1

在 #btn

的 css 中应该是 float:right

ul{
    list-style-type: none;
    padding: 0;
    right: 0px;
    top: 0px;
}
#btn{
    float: right;
    margin-left: 1px;
    text-transform: uppercase;
    padding: 10px;
    border: none;
    background: #22;
    cursor: pointer;
}
#btn:hover{
    background: #333;
    color: #fff;
    transition: all .2s ease-in-out;
}
#btn.fb:hover{
    background: #3b5998;
}
#btn.tw:hover{
    background: #55ACEE;
}
#btn.yt:hover{
    background: #b31217;
}

<ul>
    <li>
        <button class='yt' id='btn'>Youtube</button>
    </li>    
    <li>
        <button class='tw' id='btn'>Twitter</button>
    </li>
    <li>
        <button class='fb' id='btn'>Facebook</button>
    </li>
</ul>