html – 更改范围的文本会将父元素向左移动

2023年3月13日 230次阅读

如果有人可以立即指引我到正确的地方,我很抱歉,但我不确定甚至可以搜索这个特定的问题.它似乎是特定于Chrome的错误,但我不确定如何解决它.

发生的事情是,当我替换跨度中的文本时,它正在向左移动(大)父锚. (请参阅演示文稿的小提琴：http://jsfiddle.net/Sj3Gj/2/)我简化了HTML,但由于各种原因,这是我需要的结构/ CSS.如果你将float：left放在锚元素上,它可以正常工作,但我有一个更大的结构,这个额外的浮动会打破更大结构的定位.

我在这里完全失败了.如果你看一下chrome中的小提琴,锚点会向左浮动,但在Firefox / IE中,它很好.有任何想法吗？

这是我的代码：

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

最佳答案 这是因为你将div浮动到左边.删除浮动,因为您已经声明了内联块,所以不需要它

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

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