聚焦多列布局中的轮廓片段

Question

有没有办法防止焦点轮廓片段留在左栏？或者这是一个铬虫？

以下是我fiddle

的链接

＆＃13;

＆＃13;

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

＆＃13;

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

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在li-elements的CSS中，您需要使用display: inline-block;而不是block。然后，您需要将宽度设置为width: calc(100% - 50px);，以便每个项目填充该行而不超出ul元素。最后，您需要在li元素的顶部和底部提供一些余量。它是从元素的顶部开始，轮廓溢出。

我的答案的一些部分可以在这个旧的SO问题的接受答案中找到：

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

我有一个JS小提琴：

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>

Answer 2

Outlines never take up space, as they are drawn outside of an element's content.

您不应将注意力集中在李氏身上。相反，您应该使用li的包装纸，并在每个li的内部放置一个focusable element（例如按钮或链接）。

让可聚焦元素处理焦点，然后将li上的填充设置为与可聚焦元素的轮廓宽度相似。