Javascript 为什么要添加'；边距：0自动'；滑动菜单会破坏它吗？

我正在创建一个滑动菜单，一切正常，直到我尝试使用

边距：0 auto

我强烈认为问题来自相对定位和我正在使用的jQuery

.animate

函数。所以我正在寻找另一种方法来达到同样的效果

这是问题的症结所在

（图像无法包含，所以我在所有内容上都添加了边框，问题在于绿色边框的div）

删除

页边距：0自动以查看它是否按我希望的方式工作


正文{
保证金：0；
填充：0；
}
#内容{
宽度：625px；
边框：1px纯红；
}
#内容分区滑块{
位置：相对位置；
宽度：50px；
高度：100px；
背景图片：url（images/rond.png）；
背景重复：无重复；
背景位置：中心；
背景尺寸：封面；
z指数：2；
顶部：110px；
左：25px；
边框：1px纯红；
}
.菜单{
颜色：#00C；
字号：18px；
字体系列：“拟声鲨鱼！”；
位置：绝对位置；
宽度：50px；
高度：100px；
背景图片：url（images/ligne_barre.png）；
背景位置：中心；
背景重复：无重复；
光标：指针；
边框：1px纯红；
}
.菜单p{
宽度：150px；
浮动：左；
位置：绝对位置；
顶部：-25px；
左：10px；
}
.菜单p：悬停{
宽度：150px；
浮动：左；
位置：绝对位置；
顶部：-25px；
颜色：红色；
}
#巴尔{
位置：相对位置；
宽度：600px；
高度：28px；
背景图片：url（images/ligne.png）；
背景位置：中心；
列表样式类型：无；
顶部：25px；
填充：0；
边框：1px纯红；
}
#sousMenu1{
保证金：0；
填充：0；
边缘顶部：90像素；
背景图片：url（images/sousmenu.png）；
背景位置：左；
背景重复：无重复；
溢出：隐藏；
浮动：左；
高度：150像素；
显示：无；
文本对齐：左对齐；
}
#sousMenu2{
保证金：0；
填充：0；
边缘顶部：90像素；
左边距：10px；
背景图片：url（images/sousmenu.png）；
背景位置：左；
背景重复：无重复；
溢出：隐藏；
浮动：左；
高度：150像素；
显示：无；
}
#sousMenu3{
保证金：0；
填充：0；
边缘顶部：90像素；
左边距：10px；
背景图片：url（images/sousmenu.png）；
背景位置：左；
背景重复：无重复；
高度：150像素；
宽度：250px；
溢出：隐藏；
浮动：左；
显示：无；
}
#sousMenu4{
保证金：0；
填充：0；
边缘顶部：90像素；
左边距：10px；
背景图片：url（images/sousmenu.png）；
背景位置：左；
背景重复：无重复；
高度：150像素；
溢出：隐藏；
浮动：左；
显示：无；
}
ol{
文本对齐：左对齐；
填充顶部：20px；
}
奥拉{
文字装饰：无；
}



阿奎尔



动画





技巧





火炉





普林西比



阿凡克斯效应





$（文档）.ready（函数（）{
函数sousmenuCache（）{
$（“sousMenu1”）.hide（“fast”）；
$（“sousMenu2”）.hide（“fast”）；
$（“sousMenu3”）.hide（“fast”）；
$（“sousMenu4”）.hide（“fast”）；
}
$（“#选项1”）。单击（函数（）{
sousmenuCache（）；
});
$（“#选项2”）。单击（函数（）{
sousmenuCache（）；
$（“#sousMenu1”）。延迟（300）。显示（“慢”）；
});
$（“#选项3”）。单击（函数（）{
sousmenuCache（）；
$（“#sousMenu2”）。延迟（300）。显示（“慢”）；
});
$（“#选项4”）。单击（函数（）{
sousmenuCache（）；
$（“#sousMenu3”）。延迟（300）。显示（“慢”）；
});
$（“#选项5”）。单击（函数（）{
sousmenuCache（）；
});
$（“#选项6”）。单击（函数（）{
sousmenuCache（）；
$（“#sousMenu4”）。延迟（300）。显示（“慢”）；
});
//集装箱中心
var middleOption=（$（“#barre”）.height（）-（$（“#option1”）.height（）-$（“#barre”）.height（））；
//菜单中的选项
var-leftOption=-70；
$（“#content#barre li”）。每个（函数（）{
$（this.css（'top'，''+middleOption+'px'）；
$（this.css（'left'，''+（leftOption+90）+'px'）；
leftOption+=90；
});
$（函数（）{
$（“.menu”）。单击（函数（）{
var middleSlider=（$（“.slider”）.width（）-$（“#选项1”）.width（））*0.5）；
$（“.slider”）.animate({
左：（$（this.offset（）.left-middleSlider）
});
});
});
TweenMax.set（“#content”{
x:300
});
});
问题在于，您同时使用边距和位置来定位幻灯片，两者相互冲突。要使其处于死点，请使用左侧边距，即滑块宽度的-0.5*处，然后向左：50%

#content div.slider {   
    position:relative;
    width: 50px;
    height: 100px;
    background-image:url(images/rond.png);
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    z-index: 2; 
    top: 110px;
    left: 50%;
    border: 1px solid green;
    margin-left:-25px;
}

当您居中时，在制作动画时必须考虑额外的偏移量。很难解释，看看这个更新的小提琴：


var fix=（$（document.width（）-$（'#content'）.width（））*.5；//非常感谢！说到js定位，我太笨了！我们都必须从某个地方开始。我的一般方法是使用边距和填充，当它们失败时，删除它们并使用位置。盒子模型！谢谢，我花了整整一个下午的时间来解决这个问题。是的，有时候我们只是需要一双新的眼睛。
var fix = ($(document).width() - $('#content').width()) * .5; // <-- need to subtract this

$(".menu").click(function () {
    var middleSlider = ($(".slider").width() - $("#option1").width()) * 0.5;
    $(".slider").animate({
        left: ($(this).offset().left - middleSlider - fix)
    });
});