0

このhttp://jsfiddle.net/q4rdL/2/を修正するのを手伝っ てください% 前の div と次の 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>

質問は、マージンを正しく機能させる方法と、なぜこれを行うのですか?

4

6 に答える 6

3

これを試してくださいhttp://jsfiddle.net/q4rdL/32/

幅 100% を削除し、一部の div の「位置」を変更すると、ソリューションを任意の解像度に拡張できます

于 2012-06-05T13:18:46.527 に答える
0

私が見る限り、id = "next" の要素の position:absolute を削除する必要があります

于 2012-06-05T12:56:06.577 に答える
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

私はあなたの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

フロートを使用しない独自のバージョンを試しました。それはすべて絶対的なものとして位置付けられています。width: 100%あなたが持っている境界線のために常に2pxずれるので、メニューdivのを削除しました。幅を変更する div を使用する代わりに、 を使用して単純に中央に配置しましたposition: absolute; left: 50%; margin-left: -<half the size of #menuContent>。したがって、#menuContent が 500px の場合、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 に答える