다중 열 레이아웃의 개요 개요 조각

Question

왼쪽 열에이 초점 윤곽선 조각이 남지 않도록하는 방법이 있습니까? 아니면 크롬 버그인가요? 여기

는 display: inline-block; 대신 block를 사용하는 데 필요한 리튬 요소에 대한 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 바이올린을