有人可以帮我解决这个问题http://jsfiddle.net/q4rdL/2/ 我正在做一个菜单,下一个和前一个按钮一个向右浮动,另一个向左浮动,我在前一个和下一个div之间添加了宽度100%高度100%的div,左边距工作正常,边距右边不起作用在所有
这是代码:
<div id="menu" style ="width : 100% ; height:50px ; border : 2px solid red ; position : absolute ; top:0 ; display : none" >
<div id="pre" style ="height:100% ; width: 50px ; border :1px solid green ; float :left ; left:0 "><</div>
<div id="menuContent" style="width:100% ; height:100% ; border : 5px solid green ; position:absolute; margin-left :60px ;" > </div>
<div id="next" style ="height:100% ; width: 50px ; border :1px solid green ; float :right ; right:0 ; position:absolute ">></div>
</div>
<div id="show_hide" style ="width : 100% ; height:70px ; position : absolute ; top:0" ></div>
问题是如何使保证金正确起作用以及为什么这样做?
答案 0 :(得分:3)
试试这个http://jsfiddle.net/q4rdL/32/
我删除宽度100%并更改某个div上的“位置”,解决方案可以拉伸到任何分辨率
答案 1 :(得分:0)
据我所见,你应该删除position =绝对的id =“next”的元素
答案 2 :(得分:0)
我试图清理你的html并将其移动到非内联css。
<强> HTML 强>:
<div id="menu">
<div id="pre"><</div>
<div id="menuContent"></div>
<div id="next">></div>
</div>
<div id="show_hide"></div>
<强> CSS 强>:
#menu {
width: 100%;
height: 50px;
border: 2px solid red;
}
#pre {
height: 100%;
width: 3%;
border: 1px solid green;
float: left;
padding-left:7px;
}
#menuContent {
float:left;
width: 90%;
height: 100%;
border: 5px solid green;
}
#next {
height: 100%;
width: 3%;
border: 1px solid green;
float: right;
padding-left:7px;
}
#show_hide {
width: 100%;
height: 70px;
position: absolute;
top:0;
}
答案 3 :(得分:0)
如果您想使用menuContent
为潜水设置正确的保证金,则必须将其width
更改为更低,100%表示您的视图宽度和边距将被添加,因此您将为您的浏览器设置水平滚动。
试试这个:
<div style="height: 100%; border: 5px solid green; position: absolute; width: 90%; margin: 0pt 58px;" id="menuContent"> </div>
另外,我真的不知道你要做什么,但我希望你有想法,我的回答对你有帮助。
修改:我已将menu
更改为相对位置,请参阅此链接:http://css-tricks.com/absolute-positioning-inside-relative-positioning/
答案 4 :(得分:0)
我尝试了不使用浮点数的自己的版本。这一切都是绝对的。我删除了菜单div上的width: 100%
,因为它的边界总是会被2px关闭。我没有使用改变宽度的div,而是使用position: absolute; left: 50%; margin-left: -<half the size of #menuContent>
将其集中在一起。因此,如果#menuContent是500px,那么margin-left: -250;
。让我知道你的想法:JS Fiddle
答案 5 :(得分:-1)
在我看来,如果改变结构会好得多;请查看此Fiddle。
<强> HTML:强>
<div id="menu">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td id="pre">
<
</td>
<td id="menuContent">
</td>
<td id="next">
>
</td>
</tr>
</table>
</div>
<强> CSS:强>
#menu {
width : 100% ;
height:50px ;
border : 1px solid red ;
top:0 ;
}
#pre, #next {
width: 50px;
}
#menu td {
border : 1px solid red ;
height: 50px;
vertical-align: middle;
text-align: center;
}