When you hover over li, do the second row li move

Question

I am trying to show the border color when hovering over a list of elements. When I move the mouse over the elements of the first line, the elements of the second line move to the right. Please check 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; } } 

Answer 1

Add a transparent border to your 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> 

Answer 2

box-sizing: border-box; user box-sizing: border-box; can box-sizing: border-box; on ul.tiles li http://jsfiddle.net/gm8zvfsk/

The box-sizing property is used to tell the browser what property sizes (width and height) should include.

Whether they should include a border block or just the content, which is the default value for the width and height properties.

For example, if you want two border fields side by side, this can be achieved by setting the window size in the "border-box". This forces the browser to display a window with the specified width and height and place the border and registration inside the box.

Answer 3

JS Fiddle .

As Praveen said, using outlines fixes the problem.

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