Question

我最近问了一个问题，我所做的代码是格式化问题，我使用codepen来托管代码。感谢这个伟大的社区我修复了它，但是当我在浏览器中打开代码时，格式化又错了！在codepen中，所有内容都是正确对齐的，但在浏览器中，标题图片周围有一个边框，列表是垂直的：http://imgur.com/a/6Z69J

有人可以帮我理解发生了什么吗？

这是我的代码：

HTML：

<body style="background-image:url(http://i.imgur.com/H8TRHvl.jpg)">
<div class = "header"> 
  <img src="http://p1.pichost.me/640/58/1822357.jpg"  width="1920" height="105"/>
  <div class = "nav">
        <ul>
      <li><a href=""><img src = "http://i.imgur.com/ATRWCQV.png" alt ="Home"></a></li>
            <li><a href=""><img src = "http://i.imgur.com/h8qThUn.png" alt ="Home"></a></li>
            <li><a href=""><img src = "http://i.imgur.com/W0wlQDw.png" alt ="Home"></a></li>
            <li><a href=""><img src = "http://i.imgur.com/JDZXLoC.png" alt ="Home"></a></li>
            <li><a href=""><img src = "http://i.imgur.com/jAxfdQj.png" alt ="Home"></a></li>
        </ul>
</div>
</div>

的CSS：

#header
{
  position: fixed; 
  top: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  z-index: 20;
}
#nav
{
  position: initial;
  z-index: 30;
}
li
{
  margin: 0 100px;
  display: inline;
}
li:hover
{
  background: url(http://i.imgur.com/TakXFRx.png) no-repeat;
}

body
{
  margin: 0;
}

ul
{
    padding: 0;
    display: inline-block;
}

.nav
{
    position: absolute;
    top: 50px;
    left: -132px;
    right: 0;
    margin: 0 auto;
    text-align: center;
}
a.t_home 
{
    background: url() no-repeat;
    display: block;
    height: 100%;
    width: 50px;
}

如果有帮助，请编写代码页：http://codepen.io/jjesh/pen/ogbMNm

浏览器格式化问题（边框和列表）

0 个答案: