0

有人可以帮我解决这个问题http://jsfiddle.net/q4rdL/2/ 我正在做一个菜单，其中包含下一个和上一个按钮，一个向右浮动，另一个向左浮动，我添加了一个宽度为 100% 高度为 100 的 div % 在 pre 和 next divs 之间，左边距工作正常右边距根本不起作用

这是代码：

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

问题是如何使边距正确有效，为什么要这样做？

4

6 回答 6

3

试试这个http://jsfiddle.net/q4rdL/32/

我删除宽度 100% 并更改某些 div 上的“位置”，解决方案可以拉伸到任何分辨率

于 2012-06-05T13:18:46.527 回答
0

据我所知，您应该删除 position:absolute 元素的 id = "next"

于 2012-06-05T12:56:06.577 回答
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;
}​

现场演示

于 2012-06-05T13:10:58.087 回答
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/

于 2012-06-05T13:12:36.033 回答
0

我尝试了自己的不使用浮点数的版本。这一切都被定位为绝对的。我删除了width: 100%菜单上的 div，因为由于您拥有的边框，它总是会关闭 2px。我没有使用 div 来改变其宽度，而是简单地使用position: absolute; left: 50%; margin-left: -<half the size of #menuContent>. 因此，如果 #menuContent 为 500 像素，则margin-left: -250;. 让我知道你的想法：JS Fiddle

于 2012-06-05T13:25:13.093 回答
-1

在我看来，如果你改变结构会好得多；检查这个小提琴。

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;
}
于 2012-06-05T13:29:17.270 回答