All geek questions in one place

Change span text moves parent to left

I apologize if someone can immediately direct me to the right place, but I'm not sure even to look for this particular problem. This seems to be a Chrome bug, but I'm not sure how to fix it.

What happens when I replace the text in the gap, it moves the (grandiose) parent anchor to the left. (see the script for a demo: http://jsfiddle.net/Sj3Gj/2/ ) I simplified the HTML, but for various reasons, this is the / CSS structure that I need. If you put float: on the left of the anchor element, it works fine, but I have more of this structure, and this extra float disrupts the location of the larger structure.

I have a complete loss here. If you look at the fiddle in chrome, the anchor will float to the left, but in Firefox / IE this is normal. Any ideas?

Here is my code:

<a class="trigger"> <div></div> <span>Some text</span> </a> a.trigger { width: 337px; height: 16px; padding: 2px 20px 2px 5px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } a.trigger, a.trigger:link, a.trigger:visited { display: inline-block; border: 1px solid; border-top-color: #BFD6F1; border-left-color: #BFD6F1; border-bottom-color: #9EBCE1; border-right-color: #9EBCE1; padding: 2px 18px 2px 7px; background-color: #FFF; text-decoration: none; cursor: pointer; } div{ background-image: url('http://placekitten.com/200/300'); height: 16px; width: 16px; display: inline-block; float: left; } a.trigger span { margin-left: 10px; } a.trigger, a.trigger:link, a.trigger:visited { cursor: pointer; }
+4
source share
1 answer

This is because you are floating in the div on the left. remove the float, it is not needed since you already declared inline-block

DEMO http://jsfiddle.net/kevinPHPkevin/Sj3Gj/5/

 div{ background-image: url('http://placekitten.com/200/300'); height: 16px; width: 16px; display: inline-block; }
+2
source

Source: https://habr.com/ru/post/1495611/

More articles:


All Articles