Question

我想在Bootstrap列的外部底部有一个Font Awesome图标列表。目前我已经绝对定位它们，当我在悬停时设置更大的宽度或更大的填充时，图标将向左增大，而我希望它向右移动。

如何将其设置为右侧，以及如何阻止第二个元素的反应？该功能未规划:) 如果有人更好地了解如何设置它，我会很高兴听到。

ul {
  position: absolute;
  bottom: 60px;
  right: -50px;
  li {
    a.btn {
      width: 50px;
      height: 46px;
      display: block;
      &:hover {
        width: 100px;
        padding-left: 50px;
      }
    }
  }
}

<div class="col col-md-8">

  ... content ...

  <ul class="share-buttons-outside list-unstyled">
    <li>
        <a class="btn" href="#">
            <i class="fa fa-facebook" aria-hidden="true"></i>
        </a>
    </li>
    ...
</ul>
</div>

Answer 1

相对于右边缘的位置，从左边做位置：

ul {
    left: 100%;
    /* REMOVE right: -65px */
}

Answer 2

您可以添加边距以正确定位它：

ul li a.btn:hover {
   width: 100px;
   margin-right: -50px;
   padding-left: 50px;
}

这似乎纠正了与另一个人互动的问题。

工作代码：http://codepen.io/sol_b/pen/xEVdgj

Answer 3

您可以设置left值，而不是右侧：

ul {
  position: absolute;
  bottom: 60px;
  left: 758;
...

Answer 4

也许这个简单的解决方案已经足够了。而不是

inlineNav

DO

right: -50px;

Answer 5

您可以在position: absolute;元素上使用li：

Codepen

 li {
    border: 0;
    position: absolute;
    left: -50px;
    top: -46px;
    &:nth-child(2) {
      top: 0;
    }
}

在悬停时设置更宽的绝对定位元素，但到另一侧

5 个答案: