Question

我在使用text-align居中的div中有一个h1标记。 div使用margin：auto来居中。我有JQuery正在改变这个div的宽度，但是，在重新调整大小时，文本会向右移动一点。这也发生在我下面的（也是居中的）菜单栏中。这是来自JSFiddle的代码：

HTML

<div id="content">
    <div id="header">
        <h1>Title</h1>
    </div>
    <div>
        <ul class="menu">
            <li class="menu"><a class="active" href="#">Text</a></li>
            <li class="menu"><a                href="#">Text</a></li>
            <li class="menu"><a                href="#">Text</a></li>
            <li class="menu"><a                href="#">Text</a></li>
            <li class="menu"><a                href="#">Text</a></li>
        </ul>
    </div>
</div>

JQuery的

$(document).ready(function() {
    var div = $("div");
    div.fadeTo(0, 0);
    div.fadeTo(1000, 1);
    div.animate({width: '+=2%'}, 250);
    div.animate({width: '-=2%'}, 500);
});

为简洁起见，css是从帖子中提交的，但是在JSFiddle上

造成这种情况的原因是什么？怎么可以避免呢？ CSS中没有任何内容可以独立地影响任何内容的宽度或位置。

JSFiddle：https://jsfiddle.net/5vtvzsgc/

Answer 1

这是因为您正在更改页面上所有div的宽度。要解决此问题，只需更改外部div content的宽度，然后更改此行：

var div = $("div");

对此：

var div = $("#content");

调整父元素大小时文本移动

1 个答案: