-1

以下は、指定されたフィドルです
http://jsfiddle.net/Fx9rA/ 

<div id="wrap">

        <ul id="accordion">
            <li>
                <h2 id="first">CMT</h2>
                <div class="content">
                    <ul id="accord">
                        <li>
                            <a href="#" class="history_heading" rel="history_heading">HISTORY</a>
                            <ul>
                                <li><a href="#">Link One</a></li>
                                <li><a href="#">Link Two</a></li>
                                <li><a href="#">Link Three</a></li>
                                <li><a href="#">Link Four</a></li>
                                <li><a href="#">Link Five</a></li>
                            </ul>
                        </li>

                        <li>
                            <a href="#" class="geography_heading" rel="geography_heading">GEOGRAPHY</a>
                            <ul>
                                <li><a href="#">Link One</a></li>
                                <li><a href="#">Link Two</a></li>
                                <li><a href="#">Link Three</a></li>
                                <li><a href="#">Link Four</a></li>
                                <li><a href="#">Link Five</a></li>
                            </ul>
                        </li>
                    </ul>

                </div>
            </li>
            <li>
                <h2>FOIS</h2>
                <div class="content">
                    Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
                </div>
            </li>
            <li>
                <h2>ASP</h2>
                <div class="content">
                    Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
                </div>
            </li>
            <li>
                <h2>PTT</h2>
                <div class="content">
                    Consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
            </li>
        </ul>
    </div>

私の問題は、最初のタブ、つまりCMTにマウスを合わせると、履歴と地理のリストを含むブロックが右側に表示されますが、左側に置きたいのですが、どこに問題があるのか​​ わかりません。 CSS。私を助けてください 

#wrap {
    margin-left: 5px;
    margin-top: 5px;
    width: 100px;
}


#accordion {
    width: 200px;
    margin: 0px;
    padding: 0px;
    list-style: none;
    border: 1px solid #ddd;
}

    #accordion h2 {
        font-size: 12px;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0px;
        text-decoration: none;
        padding: .25em .25em .25em 2em;
        color: #333;
        background: url('compo_images/gradient_v_gray.gif') repeat-x;
        background: url("./compo_images/arrow_exp_s.gif") 1em .75em no-repeat;
        border-bottom: 1px solid #ddd;
        cursor: pointer;
    }

        #accordion h2:hover {
            background: url('compo_images/gradient_v_orange.gif') repeat-x;
            color: white;
        }

    #accordion li div.content {
        display: none;
        padding: 5px;
        background: #f6f7e7;
        /*border: 1px solid #ddd;*/
    }

    #accordion li:hover div.content {
        border-bottom: 1px solid #ddd;
        display: inherit;
    }

    #accordion li:hover h2 {
        color: white;
        background-image: url("./compo_images/arrow_exp_n.gif");
        background: url('compo_images/gradient_v_orange.gif') repeat-x;
    }

#accord > li {
    padding-left: 5px;
    list-style-type: none;
}

    #accord > li > ul {
        list-style-type: none;
    }


#accord a {
    padding: 5px;
}
4

3 に答える 3

1

ドロップダウンの ul に「0」パディングを追加します。

 #accord{ padding: 0; }

これにより、リストからすべてのパディングが削除されます。ブラウザー スタイルはほとんどの要素に実装されており、探している結果を得るために削除する必要がある場合があります。

また、スタイル シートの前に「reset.css」を適用してみてください。これにより、作業用の空白のキャンバスが作成されます。

于 2013-09-27T09:56:37.530 に答える
0

このような

スタイルシートに書き込むだけ*{margin:0;padding:0;}で、ソリューションが得られます。

デモ

CSS

*{
    margin:0;
    padding:0;
}
    #accord > li > ul {
        list-style-type: none;
    text-align:left;
    margin:0;
    padding:0;


    }
于 2013-09-27T09:55:29.237 に答える