複数の列のレイアウトにフォーカスアウトラインのフラグメント

Question

このフォーカスアウトラインの断片が左の列に残らないようにする方法はありますか？それともクロームバグですか？

ここでは、display: inline-block;代わりのblockを使用する必要があるのLi-要素のためのあなたのCSSで私のfiddle

let $li = $('li'); 
 
let liLength = $li.length; 
 
let half = Math.floor(liLength/2); 
 
let $target = $li.eq(half); 
 
$target.addClass('focus');

ul { 
 
    margin: 10px; 
 
    columns: 2; 
 
} 
 

 
li { 
 
    display: block; 
 
    padding: 10px; 
 
    margin-bottom: 20px; 
 
} 
 

 
li:focus, 
 
li.focus { 
 
    outline: green auto 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
</ul>

Answer 1

へのリンクです。次に、幅をのように設定して、各項目がul-要素を超えずに行を塗りつぶすようにする必要があります。最後に、li要素の上部と下部の両方に余裕を持たせる必要があります。これは、要素の上部から、輪郭がはみ出しています。

私の答えのための作品のいくつかは、この古いSO質問への受け入れ答えで見つけることができます：

http://jsfiddle.net/kwiliarty/jz0qfmo8/2/

let $li = $('li'); 
 
let liLength = $li.length; 
 
let half = Math.floor(liLength/2); 
 
let $target = $li.eq(half); 
 
$target.addClass('focus');

ul { 
 
    margin: 10px; 
 
    columns: 2; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    padding: 10px; 
 
    margin: 10px 0; 
 
    width: calc(100% - 50px); 
 
} 
 

 
li:focus, 
 
li.focus { 
 
    outline: green auto 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
</ul>

：

CSS multi-column layout of list items doesn't align properly in Chrome

私がでJSのフィドルを持っています