When step am I missing from moving a premade code from Codepen into my Brackets project?
Question
Here is the codepen I'm trying to get working: http://codepen.io/Bounasser-Abdelwahab/pen/ruiky
Here is the head of my index.html file in my Brackets project:
<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>
When I try to run this, it runs about 90% correctly, but it's not a complete match. The menu is misaligned, and I can see bullet points that weren't there before, and the padding is all wrong.
How can I get a complete replication of the codepen code into my own project?
Edit: here is an image of how mine is coming out: http://i.imgur.com/F3o0yQF.png
Edit 2:
Here is my slightly modified HTML. Problem is persisting.
<!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>
2 answers
solution1
1 ACCPTED 2015-03-17 05:29:45
这是将解决这些问题的课程：
`ol, ul { list-style: outside none none; }`
solution2
1 2015-03-17 05:34:55
As you asked, another question later on, so adding another answer.
For removing the strange extra space to the left of some boxes,
Add below CSS class:
.body{
//your other class properties ...
padding:0
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.