HTML/CSS：リストボタンそのもの

Question

<ul class='list'> 
<li class='list-item'> 
    <span>Entry 1</span> 
    <span class='button-group'> 
     <button>Delete</button> 
    </span> 
</li> 
<li class='list-item'> 
    <span>Entry 2</span> 
    <span class='button-group'> 
     <button>Delete</button> 
    </span> 
</li> 
</ul> 

ボタンを自分の間に配置したいと思います。

このdoesntの仕事：

button { 
    margin: 0; 
    float: right; 
} 

どのように私はこの問題を解決することができますか？ありがとうございました...

Answer 1

コードは機能していますが、調整が不足しています。

ボタン、画像、およびその他の同様の要素が、フローティングされている場合、そのリスト項目を含むものからブリードする傾向があります。

まず、ボタンの代わりにボタンコンテナをフロートすることをおすすめします。ボタンを追加する必要がある場合は、すぐにフロートし、正しい順序で保持されます。

第2に、リストアイテムに高さを付けて、少なくともボタンの高さになるようにします。この方法では、ボタンは正しく整列します。

li { 
 
    min-height: 24px; 
 
} 
 

 
.button-group { 
 
    display: inline-block; 
 
    float: right; 
 
}

<ul class='list'> 
 
<li class='list-item'> 
 
    <span>Entry 1</span> 
 
    <span class='button-group'> 
 
     <button>Delete</button> 
 
    </span> 
 
</li> 
 
<li class='list-item'> 
 
    <span>Entry 2</span> 
 
    <span class='button-group'> 
 
     <button>Delete</button> 
 
    </span> 
 
</li> 
 
</ul>