UL 和 Li 样式应该放在右侧

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

在

下拉列表中将"0"填充添加到 ul：

 #accord{ padding: 0; }

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

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

Answer 2

像这样

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

演示

.css

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

    }

Answer 3

您可以在"历史"和"地理"下为"li"提供一个带有文本对齐：右或使用左填充：？px或左边距：？px的类。填充和边距将使您能够更好地控制希望它们位于右侧的空间。