如何获得单个元素的内部和外部宽度?

时间:2013-08-28 10:35:57

标签: jquery css width

CSS或jQuery中有没有办法让内部和外部宽度达到单个元素
我的div有一个width 100%height 30px,在这个div中我有一个导航菜单列表(两个无序列表)。我希望inner width 960px到这个div,以便菜单居中,div的背景宽度为100%,因为div的宽度为100%。

例如: Inner and outer width

我不想在这个div里面或外面添加任何其他div。我想用这个单个div 做这一切。我怎么能做到这一点?

非常感谢任何帮助!非常感谢你!

3 个答案:

答案 0 :(得分:1)

div {
   width: 100%;
   background: url("...");
}
    div ul {
        margin: 0px auto;
        width: 960px;
    }

答案 1 :(得分:1)

首先: 如果您只是尝试实现居中问题,请将text-align:center;添加到div。 你不需要玩宽度。

其次: 你为什么不用width: 960px;添加第二层div?

答案 2 :(得分:1)

这样的事情怎么样?

div{
width:100%;
height:30px;
border:1px solid red;/* for fiddle visualization*/}

ul{  
margin:0;
height:30px; 
width:430px;
position: relative;   

}
div ul:first-of-type{
background-color:#00f;/* for fiddle visualization*/
left: 50%;
margin-left: -430px; 
float: left;
}
div ul:nth-of-type(2){
background-color:#0f0;/* for fiddle visualization*/
right: 50%;
margin-right: -430px; 
float: right;

}
这是一个小提琴: http://jsfiddle.net/FKZx5/