Question

以下是我尝试开始工作的代码：http://codepen.io/Bounasser-Abdelwahab/pen/ruiky

以下是我的Brackets项目中index.html文件的主管：

<head>
            <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="css/style.css" />


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>

当我尝试运行它时，它正确地运行了大约90％，但它不完全匹配。菜单未对齐，我可以看到以前没有的子弹点，并且填充都是错误的。

如何将codepen代码完全复制到我自己的项目中？

编辑：这是我的出版方式的图像：http://i.imgur.com/F3o0yQF.png

编辑2：

这是我稍加修改的HTML。问题仍然存在。

<!DOCTYPE html>
<!--

-->
<html lang="en">
    <head>
        <link type="text/css" rel="stylesheet" href="css/style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="js/init.js"></script>
    </head>



   <body>

<ul class="navbar cf">
            <li><a href="#">item 2</a></li>
            <li><a href="#">item 3</a>
                <ul>
                    <li><a href="#">sub item 1</a></li>
                    <li><a href="#">sub item 2</a></li>
                    <li><a href="#">sub item 3</a>
                        <ul>
                            <li><a href="#">google</a></li>
                            <li><a href="">yahoo!</a></li>
                            <li><a href="">jQuery</a>
                                <ul>
                                    <li><a href="#">sub sub item 1</a></li>
                                    <li><a href="#">sub sub item 2</a>
                                        <ul>
                                            <li><a href="#">sub sub sub item 1</a></li>
                                            <li><a href="#">sub sub sub item 2</a></li>
                                            <li><a href="#">sub sub sub item 3</a>
                      <ul>
                        <li><a href="#">sub item 1</a></li>
                        <li><a href="#">sub item 2</a></li>
                        <li><a href="#">sub item 3</a></li>
                      </ul>
                      </li>
                                        </ul>
                                    </li>
                                    <li><a href="#">sub sub item 3</a></li>
                                    <li><a href="#">sub sub item 4</a></li>
                                    <li><a href="#">sub sub item 5</a>

                  </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">item a little longer</a></li>
                </ul>
            </li>
            <li><a href="#">item 4</a></li>
            <li><a href="#">item 5</a></li>
        </ul>





    </body>
</html>

Answer 1

以下是解决这些问题的课程：

`ol, ul { list-style: outside none none; }`

Answer 2

正如你所问，后来的另一个问题，所以添加另一个答案。

为了移除某些方框左侧的奇怪的额外空间，
添加以下CSS类：

.body{
    //your other class properties ...
    padding:0
}

当我从Codepen将预制代码移动到我的Brackets项目中时，我错过了什么步骤？

2 个答案: