title: Not able to position <button> inside a <li>
body: <p>So I basically want to do a list, each li containing an anchor and a dropdown menu (using bootstrap). The li are contained into a div, itself contained into a ul. I successfully aligned the anchors on the left, and I would like to do the same thing for the dropdowns on the right, but it's not working. Here's the result, each element with a border to visualize its behaviour.</p>
  
  <p><img src="https://i.stack.imgur.com/GVkD8.png" alt="enter image description here"></p>
  
  <p>Here's the html...</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="list_items"&gt;&lt;a href="data/'.$file.'" download target="_blank"&gt;'.$location.'&lt;/a&gt; 
          &lt;div class="dropdown"&gt;
              &lt;button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"&gt;
                  More info &lt;span class="caret"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1"&gt;
                &lt;!-- items of the dropdown menu --&gt;
              &lt;/ul&gt;
          &lt;/div&gt; 
      &lt;/li&gt;
  
      &lt;!-- repeat... --&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>... and the css</p>
  
  <pre><code>ul
  {
      display: inline-block;  
      padding: 0;
      margin-left: 20px;
      margin-right:0;
      vertical-align: top;
      width:240px;
      font-family: Verdana;
      text-align: justify;
      list-style-type: none;
  }
  
  #list_box // div containing the whole list
  {
      border-right: 2px solid #b2dba1;
      border-bottom: 2px solid #b2dba1;
      border-left: 2px solid #b2dba1;
      border-radius: 0 0 6px 6px;
      width: 230px;
      margin-left: 5px;
      padding-bottom: 5px;
      padding-top: 5px;
      background: rgba(206,232,196,0.7);
      padding-right:0;
  }
  
  .list_items // all the &lt;li&gt;
  {
      padding-bottom: 5px;
      margin-left: 5px;
      width: 100%;
      border: 1px dashed red;
  }
  
  ul .list_items .dropdown button
  {
      position: relative;
      right: 2px;
      margin-right: 0;
      border: 1px solid black;
  }
  
  .dropdown // div containing the button
  {
      display: inline-block;
      margin: 0;
      padding: 0;
      position: relative !important;
      right: 0 !important;
      border: 1px solid blue;
  }
  </code></pre>
  
  <p>What else could be done to solve this problem? Thanks!</p>