使用内联发行时与楼梯影响所有浏览器(Issue with staircase affect in all browsers when using inline)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="uft-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></head>scipt?
<![endif]-->
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
</head>
<style>
#container{
margin: auto;
width: 800px;
padding-top: 50px;
}
#menu ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
position: fixed;
background-color: blue;
top:0;
left:0;
right:0;
margin:0;
overflow:hidden;
}
#menu a
{
float:left;
text-decoration:none;
color:black;
padding:0.2em 0.6em;
border-right:1px solid white;
}
#menu a:hover {color: blue;}
#menu li a {display:inline;}
</style>
<div id="menu">
<ul>
<li><a href="index.php">Home</a></li><br>
<li><a href="#">Categories</a></li><br>
<li><a href="admin/index.php">Admin Panel</a></li><br>
<li><a href="admin/logout.php">Log Out</a></li><br>
</ul>
</div>
<h2></h2>
<div id="container">
<body>
<div id="header">
<h1> Welcome To My Own Personal Blog</h1>
</div>
<article>
<hr />
<h4><div id="date">10th<br>Oct</div></h4>
<h2>My Seventh Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla neque, adipiscing vitae convallis in, varius vitae enim. Vestibulum sollicitudin eu justo id placerat. Donec viverra vestibulum dictum. Suspendisse potenti. Integer quis dolor luctus diam molestie blandit. Proin tristique lacus nec tellus euismod imperdiet. Fusce gravida in augue<a href='post.php?id=7'> .. Read more</a></p>
<p>Category: Uncatagorised</p>
</article>
<article>
<hr />
<h4><div id="date">2nd<br>Oct</div></h4>
<h2>My Sixth Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla neque, adipiscing vitae convallis in, varius vitae enim. Vestibulum sollicitudin eu justo id placerat. Donec viverra vestibulum dictum. Suspendisse potenti. Integer quis dolor luctus diam molestie blandit. Proin tristique lacus nec tellus euismod imperdiet. Fusce gravida in augue<a href='post.php?id=6'> .. Read more</a></p>
<p>Category: Uncatagorised</p>
</article>
<article>
<hr />
<h4><div id="date">01st<br>Oct</div></h4>
<h2>My Fifth Post! </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla neque, adipiscing vitae convallis in, varius vitae enim. Vestibulum sollicitudin eu justo id placerat. Donec viverra vestibulum dictum. Suspendisse potenti. Integer quis dolor luctus diam molestie blandit. Proin tristique lacus nec tellus euismod imperdiet. Fusce gravida in augue<a href='post.php?id=5'> .. Read more</a></p>
<p>Category: review</p>
</article>
<article>
<hr />
<h4><div id="date">18th<br>Sept</div></h4>
<h2>My Forth Post!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla neque, adipiscing vitae convallis in, varius vitae enim. Vestibulum sollicitudin eu justo id placerat. Donec viverra vestibulum dictum. Suspendisse potenti. Integer quis dolor luctus diam molestie blandit. Proin tristique lacus nec tellus euismod imperdiet. Fusce gravida in augue<a href='post.php?id=4'> .. Read more</a></p>
<p>Category: Uncatagorised</p>
</article>
<article>
<hr />
<h4><div id="date">14th<br>Sept</div></h4>
<h2>My Third Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla neque, adipiscing vitae convallis in, varius vitae enim. Vestibulum sollicitudin eu justo id placerat. Donec viverra vestibulum dictum. Suspendisse potenti. Integer quis dolor luctus diam molestie blandit. Proin tristique lacus nec tellus euismod imperdiet. Fusce gravida in augue<a href='post.php?id=3'> .. Read more</a></p>
<p>Category: review</p>
</article>
<article>
<hr />
<h4><div id="date">12th<br>Sept</div></h4>
<h2>My Second Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla neque, adipiscing vitae convallis in, varius vitae enim. Vestibulum sollicitudin eu justo id placerat. Donec viverra vestibulum dictum. Suspendisse potenti. Integer quis dolor luctus diam molestie blandit. Proin tristique lacus nec tellus euismod imperdiet. Fusce gravida in augue<a href='post.php?id=2'> .. Read more</a></p>
<p>Category: Uncatagorised</p>
</article>
<a href='index.php?p=2'>Next</a></div>
</body>
</html>
1无法从生产楼梯影响停止菜单。 在一个单独的文件菜单正常工作。 我在想，别的东西是触发它这样做。 谢谢你的帮助。 这个想法是，菜单将类似于Facebook的菜单，并固定在屏幕的顶部。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="uft-8" /> <meta http-equiv="X-UA-Compatible" content="IE=9" /> <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></head>scipt? <![endif]--> <script src="http://code.jquery.com/jquery-1.5.min.js"></script> </head> <style> #container{ margin: auto; width: 800px; padding-top: 50px; } #menu ul { float:left; width:100%; padding:0; margin:0; list-style-type:none; position: fixed; background-color: blue; top:0; left:0; right:0; margin:0; overflow:hidden; } #menu a { float:left; text-decoration:none; color:black; padding:0.2em 0.6em; border-right:1px solid white; } #menu a:hover {color: blue;} #menu li a {display:inline;} </style> <div id="menu"> <ul> <li><a href="index.php">Home</a></li><br> <li><a href="#">Categories</a></li><br> <li><a href="admin/index.php">Admin Panel</a></li><br> <li><a href="admin/logout.php">Log Out</a></li><br> </ul> </div> <h2></h2> <div id="container"> <body> <div id="header"> <h1> Welcome To My Own Personal Blog</h1> </div> <article> <hr /> <h4><div id="date">10th<br>Oct</div></h4> <h2>My Seventh Post</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla neque, adipiscing vitae convallis in, varius vitae enim. Vestibulum sollicitudin eu justo id placerat. Donec viverra vestibulum dictum. Suspendisse potenti. Integer quis dolor luctus diam molestie blandit. Proin tristique lacus nec tellus euismod imperdiet. Fusce gravida in augue<a href='post.php?id=7'> .. Read more</a></p> <p>Category: Uncatagorised</p> </article> <article> <hr /> <h4><div id="date">2nd<br>Oct</div></h4> <h2>My Sixth Post</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla neque, adipiscing vitae convallis in, varius vitae enim. Vestibulum sollicitudin eu justo id placerat. Donec viverra vestibulum dictum. Suspendisse potenti. Integer quis dolor luctus diam molestie blandit. Proin tristique lacus nec tellus euismod imperdiet. Fusce gravida in augue<a href='post.php?id=6'> .. Read more</a></p> <p>Category: Uncatagorised</p> </article> <article> <hr /> <h4><div id="date">01st<br>Oct</div></h4> <h2>My Fifth Post! </h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla neque, adipiscing vitae convallis in, varius vitae enim. Vestibulum sollicitudin eu justo id placerat. Donec viverra vestibulum dictum. Suspendisse potenti. Integer quis dolor luctus diam molestie blandit. Proin tristique lacus nec tellus euismod imperdiet. Fusce gravida in augue<a href='post.php?id=5'> .. Read more</a></p> <p>Category: review</p> </article> <article> <hr /> <h4><div id="date">18th<br>Sept</div></h4> <h2>My Forth Post!</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla neque, adipiscing vitae convallis in, varius vitae enim. Vestibulum sollicitudin eu justo id placerat. Donec viverra vestibulum dictum. Suspendisse potenti. Integer quis dolor luctus diam molestie blandit. Proin tristique lacus nec tellus euismod imperdiet. Fusce gravida in augue<a href='post.php?id=4'> .. Read more</a></p> <p>Category: Uncatagorised</p> </article> <article> <hr /> <h4><div id="date">14th<br>Sept</div></h4> <h2>My Third Post</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla neque, adipiscing vitae convallis in, varius vitae enim. Vestibulum sollicitudin eu justo id placerat. Donec viverra vestibulum dictum. Suspendisse potenti. Integer quis dolor luctus diam molestie blandit. Proin tristique lacus nec tellus euismod imperdiet. Fusce gravida in augue<a href='post.php?id=3'> .. Read more</a></p> <p>Category: review</p> </article> <article> <hr /> <h4><div id="date">12th<br>Sept</div></h4> <h2>My Second Post</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla neque, adipiscing vitae convallis in, varius vitae enim. Vestibulum sollicitudin eu justo id placerat. Donec viverra vestibulum dictum. Suspendisse potenti. Integer quis dolor luctus diam molestie blandit. Proin tristique lacus nec tellus euismod imperdiet. Fusce gravida in augue<a href='post.php?id=2'> .. Read more</a></p> <p>Category: Uncatagorised</p> </article> <a href='index.php?p=2'>Next</a></div> </body> </html>I can't stop the menu from producing a staircase affect. The menu in a separate file works correctly. Im thinking that something else is triggering it to do this. Thank you for your help. The idea is that the menu will look similar to the Facebook menu and be fixed to the top of the screen.
最满意答案
UPDATE
OP属于代码小提琴
这个问题似乎从错误导致<li style="list-style: none"><br></li>各项目之间的<li>
更新小提琴
UPDATE
Fiddle of OP's code
The issue seems to result from erroneous <li style="list-style: none"><br></li> items between each <li>
Updated fiddle
更多推荐
发布评论