在添加文本时，将div容器自动展开为左侧而不是右侧

Question

我有一点下拉菜单，效果很好：

但是，当下拉列表中添加更多文本时，div会向右扩展，如下所示：

而我宁愿向左扩展。

标记/刀片（我正在使用Laravel）：

<div class="status-dropdown-arrow pointer" id="status-dropdown-arrow-{{ $status->id }}" data-value="{{ $status->id }}"><i class="fa fa-angle-down" aria-hidden="true"></i>
 <ul class="fallback">
    @if (Auth::user()->isFollowing($status->user))      
     <a href="{{ route('get.following.add', ['username' => $status->user->username]) }}"><li>Unfollow</li></a>
    @else 
     <a href="{{ route('get.following.add', ['username' => $status->user->username]) }}"><li>Follow</li></a>    
    @endif
    <a href="{{ route('status.report', ['statusId' => $status->id]) }}"><li>Report</li></a>                     
 </ul>
</div>

CSS：

.status-dropdown-arrow {
float:right;
margin-top: -58px;
color:#b9adad;
}

.status-dropdown-arrow ul.fallback {
position: absolute;
border: 1px solid #d8d8d8;
border-radius: 3px;
padding: 5px;
display: none;
z-index: 1000;
background-color: #f6f4f4;
list-style: none;
margin-top: 0px;
margin-left: -72px;
}

我怎样才能让容器向左扩展而不是向右扩展？

Answer 1

尝试为后备类设置一个浮动 ，它可能是正确的浮动的父属性

Answer 2

在rigth: 0上设置.status-dropdown-arrow ul.fallback，在position: relative上设置.status-dropdown-arrow就可以了。

Answer 3

父项上的

position: relative和绝对定位的子项上的right: 0会将其与父项的右侧对齐，元素将增长到左侧。

您的ul / li结构也无效。 a不能成为ul的孩子 - 您应该移动a内的li

.status-dropdown-arrow {
  float: right;
  color: #b9adad;
  position: relative;
}

.status-dropdown-arrow ul.fallback {
  position: absolute;
  border: 1px solid #d8d8d8;
  border-radius: 3px;
  padding: 5px;
  z-index: 1000;
  background-color: #f6f4f4;
  list-style: none;
  margin-top: 0px;
  right: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div class="status-dropdown-arrow pointer">
  <i class="fa fa-angle-down" aria-hidden="true"></i>
  <ul class="fallback">
    <li><a href="">Unfollow</a></li>
    <li><a href="">Follow</a></li>
    <li><a href="">Report</a></li>
  </ul>
</div>