li 要素内のリンクを、その背景が実際のテキストよりも長く、互いに均等な場所に設定するにはどうすればよいでしょうか?
CSS
.popoutsidebar li { margin-bottom: 20px; padding: 5px; }
.popoutsidebar li a { background-color: #E5E5E5; color: #B94A48; padding: 10px; border-radius: 5px; }
.popoutsidebar li a:hover { background-color: #B94A48; color: #FFFFFF; text-decoration: none; }
<a>デフォルトでは、アンカータグはインラインです。次のようなことを試してください：
.popoutsidebar li a { display:block }
プロパティを使用すると、display特定の HTML 要素を表示する方法を定義できます。
display: blockは、段落とヘッダーが常にそうであったように、要素がブロックとして表示されることを意味します。ブロックの上下には空白があり、別の順序で並べられた場合 (たとえば、フロート宣言を別の要素に追加するなど) を除いて、ブロックの隣に HTML 要素を配置することはできません。
display: inlineは、要素が同じ行の現在のブロック内にインラインで表示されることを意味します。2 つのブロックの間にある場合にのみ、要素は「無名ブロック」を形成しますが、幅は可能な限り小さくなります。