将鼠标悬停在 li 上使第二排 li 移动答案

【问题标题】：On hover over li make second row li move将鼠标悬停在 li 上使第二排 li 移动
【发布时间】：2015-01-08 01:18:36
【问题描述】：

我试图在将鼠标悬停在项目列表上时显示边框颜色。当我将鼠标移到第一行项目上时，第二行项目向右移动。请查看jsFiddle

<ul class="tiles">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

css

ul.tiles { width: 400px; }
ul.tiles li {
  float: left;
  list-style-type: none;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: white;
}
ul.tiles li:hover {
    border: 1px solid black;
}
}

【问题讨论】：

而不是border 使用outline 因为border 增加了元素的填充。 (ul.tiles li:hover { outline: 1px solid black; })
成功了。这是正确的方法吗？
视情况而定。目前您没有向边界添加半径，它也不是单边的（例如：左边界、右边界等）。在你的情况下，outline 就足够了。
这里可以找到很好的解释stackoverflow.com/q/1158515/1671639
好的，谢谢您的建议。我会检查的。

标签： html css

【解决方案1】：

为您的li 添加透明边框：

li {
    border: 1px solid transparent;
}

ul.tiles { width: 400px; }
ul.tiles li {
  float: left;
  list-style-type: none;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: white;
}
ul.tiles li:hover {
    border: 1px solid black;
}

ul.tiles li {
    border: 1px solid transparent;
}

<ul class="tiles">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

【讨论】：

【解决方案2】：

您可以在ul.tiles li 上使用box-sizing: border-box; http://jsfiddle.net/gm8zvfsk/

box-sizing 属性用于告诉浏览器大小属性（宽度和高度）应该包括。

他们应该包括边界框还是只包括内容框 width 和 height 属性的默认值。

例如，如果你想要两个并排的有边框的盒子，它可以是通过将 box-sizing 设置为“border-box”来实现。这迫使浏览器以指定的宽度和高度呈现框，以及将边框和填充放在框内。

【讨论】：

这种情况下，文字移动了，不是很理想。

【解决方案3】：

JS Fiddle.

正如 Praveen 所说，使用大纲可以解决问题。

ul.tiles li:hover {
    outline: 1px solid black;
}

【讨论】：