4

要素のリストがあり、inline-blockカーソルを合わせた要素に境界線を追加したいと考えています。box-sizing: border-boxただし、要素の幅と高さを使用して明示的に定義している場合でも、境界線が要素をオフセットする方法に注意してください。以下の動作を示しました。

* { box-sizing: border-box }

ul { font-size: 0 }

li {
  display: inline-block;
  width: 100px; height: 40px; margin: 10px;
  font-size: 20px; text-align: center;
  background-color: #FFF176;
}

li:hover { border: 5px dashed grey }
<ul>
  <li>hover</li>
  <li>over</li>
  <li>me!</li>
</ul>

私が見つけた最善の解決策は、の代わりにoutlineandを使用することですが、元の方法が機能しない理由を知りたいです:/outline-offsetborder

UPDATE : BoltClock は本当に素晴らしい説明と提案をしてくれましたが (私が求めていたのはそれだけでした)、インライン要素で抱えていたほとんどすべての問題を解決したflexboxを完全に忘れていたことを言いたかっただけです。最終的な JSFiddle ソリューションのために、これを BoltClock の透明なボーダー トリックと組み合わせました。

4

1 に答える 1

2

私は今問題を見ます。境界線を追加すると、各要素のコンテンツ ボックスがbox-sizing: border-box水平方向と垂直方向の両方に縮小されます。要素はインライン ブロックであるため、垂直方向の縮小は、ホバリングされている要素のベースラインに影響を与え、その結果、要素が存在する行のベースラインに影響を与え、同じ行にある他の要素がオフセットされます。よく見ると、要素をオフセットする目的で、テキストが実際に整列したままになっていることがわかります。

アウトラインはレイアウトに影響を与えないように設計されているため (また、画像から境界線を完全に取り除くため)、境界線をアウトラインに変更しても機能します。

ただし、このようにアウトラインを使用すると、元の境界線の効果とは大きく異なる効果が得られるのはこのためです。アウトラインの代わりに最初の透明な境界線を設定すると、境界線が背景に対して表示されているかどうかにかかわらず、コンテンツが適切な量だけオフセットされたままになります（これは以前の回答で示されましたが、おそらく反対票が投じられたため削除されました）：

* { box-sizing: border-box }

ul { font-size: 0 }

li {
  display: inline-block;
  width: 100px; height: 40px; margin: 10px;
  font-size: 20px; text-align: center;
  background-color: #FFF176;
  border: 5px dashed transparent;
}

li:hover { border-color: grey }
<ul>
  <li>hover</li>
  <li>over</li>
  <li>me!</li>
</ul>

于 2016-02-26T03:07:08.237 に答える