右邊距不起作用

Question

有人可以幫我解決這個問題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>

問題是如何使邊距正確有效，為什么要這樣做？

Answer 1

試試這個http://jsfiddle.net/q4rdL/32/

我刪除寬度100％並更改某些div上的“位置”，解決方案可以拉伸到任何分辨率

Answer 2

據我所知，你應該刪除position = absolute為id =“next”的元素

Answer 3

我試圖清理你的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;
}​

現場演示

Answer 4

如果你想用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/

Answer 5

我嘗試了自己的版本，不使用浮動。 這一切都是絕對的。 我刪除了菜單div上的width: 100% ，因為它的邊框總是會偏離2px。 我沒有使用更改寬度的div，而是使用position: absolute; left: 50%; margin-left: -<half the size of #menuContent> position: absolute; left: 50%; margin-left: -<half the size of #menuContent> position: absolute; left: 50%; margin-left: -<half the size of #menuContent> 。 所以如果#menuContent是500px那么margin-left: -250; 。 讓我知道你的想法： JS小提琴

Answer 6

現在可能為時已晚，但我是前端的新手，我剛剛遇到了類似的事情。 我只是從width的值中省略了%並且它起作用了！
我不知道為什么。

<div id="menuContent" style=" height:100% ; width:100; border : 5px solid green ; position:relative; margin-left :60px ;margin-right :60px ;" > </div>

Answer 7

在我看來，如果改變結構會好得多; 檢查這個小提琴 。

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