-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” - 这将为您提供一个空白画布： http: //meyerweb.com/eric/tools/css/reset/

于 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 回答
0

你可以在历史和地理下给你的 li 一个带有 text-align:right 的类，或者使用 padding-left:?px 或 margin-left:?px。填充和边距将使您能够更好地控制您希望它们在右侧的空间。

于 2013-09-27T10:50:52.140 回答