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

在css中应该是float:right for #btn

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>

Answer 2

将列表项向右浮动。

li {
    float: right;
}

此外，您不应在多个元素上重复使用 ID (#btn)，而应使用 class。

Answer 3

您需要添加

li {
    display:inline-block;
}

然后就可以了。这是 Fiddle

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

CSS: Trying to move buttons to the right side. Only works with "Position: absolute", but it breaks my horizontal list

css

position