位置：相对导致错误

Question

我的页面包含页脚（底部）的按钮组。当我第一次打开页面时，我得到如下按钮：

现在，有时前三个按钮被隐藏，我得到的页面如下：

我没有得到可能出错的地方？有趣的是，当我检查按钮并更改任何属性时，按钮会立即对齐。奇怪但真实。 li元素的代码：

li
{
    position: relative;
    top: 7px;
    left: 10px;
    display: block;

    float: left;
    margin-right: 10px;
}

现在，当我删除相对位置时，它不会被隐藏但是，它会到达页面顶部。

类似于this

更新：我认为这是因为position:relative，我可以在没有位置相对的情况下更改我的代码吗？或者有位置：绝对？

Fiddle

Answer 1

试试这个css：

    .details .action-bottom {
    height: 29px;
    background: #739DDD;
    border: 2px solid #01296E;
    border-top: 1px solid #666;
    margin: 0px 0 0 0;
}
.details .action-bottom ul {
    list-style: none;
    margin:0;
    padding:0;
}
.details .action-bottom li {
  display: inline-block !important;
  float: left !important;
  padding: 6px !important;
  position: inherit;
}

Update Live