Question

下面是给定的小提琴 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;
}

Answer 1

在下拉列表中向ul添加'0'填充：

 #accord{ padding: 0; }

这将从列表中删除所有填充。浏览器样式在大多数元素上实现，有时需要删除才能实现我们正在寻找的结果。

还可以尝试在样式表之前应用'reset.css' - 这将为您提供一个空白画布：http://meyerweb.com/eric/tools/css/reset/

Answer 2

喜欢这个

只需在样式表中写下*{margin:0;padding:0;}，然后就可以得到解决方案了。

<强> demo

<强> CSS

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


    }

Answer 3

你可以在历史和地理位置下给你一个带有text-align：right的类或者使用padding-left：？px或margin-left：？px。填充和边距将使您可以更好地控制右侧所需的空间。

ul和li样式应该在右边

3 个答案: