HTML列表 - 宽度问题

我想问你们的建议。我有CSS文件喜欢的HTML文件，一切都很好，但是当我在本地主机上打开这个“网站”时，它有更多的宽度我定义。我在那里看不到什么坏事。你可以看看它并告诉他们发生了什么事吗？HTML列表 - 宽度问题

我的HTML文件：

<!DOCTYPE html> 
<html lang="sk"> 
    <head> 
    <link href="scripts/google_analytics.js"> 
    <link href="scripts/facebook.js"> 
    <link href="scripts/font_Alef.js"> 
    <link href="scripts/font_Playfair.js"> 
    <link rel="shortcut icon" type="image/x-icon" href="templates/favicon.ico"> 
    <link rel="stylesheet" href="styles/index.css"> 
    <link rel="stylesheet" href="styles/media_queries.css"> 
      <meta charset="utf-8"> 
    </head> 
    <body class="body"> 
    <header class="header"> 
     <img src="templates/logo.png"> 
     <ul> 
      <li><a href="#">Niečo</a></li> 
      <li><a href="#">NIEČO</a></li> 
      <li><a href="#">NIEČO</a></li> 
      <li><a href="#">NIEČO</a></li> 
      <li><a href="#">NIEČO</a></li> 
     </ul> 
    </header> 
    <content class="content"> 
    </content> 
    <footer class="footer">niečo 
    </footer> 
    </body> 
</html>

，这里是我的index.css文件：

body { 
font-family: "Myriad Pro"; 
width: 960px; 
height: auto; 
margin: 0 auto; 
    } 

header { 
width: 960px; 
height: auto; 
display: block; 
font-family: 'Alef', sans-serif; 
font-weight: bold; 
text-align: center; 
    } 

header img { 
width: 480px; 
height: auto; 
float: left; 
    } 

header ul { 
float: left; 
width: 960px; 
background-color: #EEE; 
border-radius: 3px; 
-moz-border-radius: 3px; 
-webkit-border-radius: 3px; 
    } 

header ul li { 
    float: left; 
width: 192px; 
display: inline-block; 
list-style: none; 
text-align: center; 
border-radius: 3px; 
-moz-border-radius: 3px; 
-webkit-border-radius: 3px; 
height: 40px; 
    } 

a { 
text-decoration: none; 
color: #ED1C25; 
    } 

content { 
float: left; 
width: 940px; 
background-color: #686868; 
    height: auto; 
border-radius: 3px; 
-moz-border-radius: 3px; 
-webkit-border-radius: 3px; 
display: block; 
padding: 10px; 
margin-bottom: 10px; 
    } 

footer { 
float: left; 
width: 960px; 
background-color: #ED1C25; 
height: auto; 
display: block; 
height: 50px; 
border-radius: 3px; 
-moz-border-radius: 3px; 
-webkit-border-radius: 3px; 
    }

来源

2014-01-14 Dawid Zbiński

标签<ul>在默认情况下填充值。
在css中设置padding: 0来解决这个问题。

working fiddle

header ul { 
    padding:0; /* added */ 
    float: left; 
    width: 100%; 
    background-color: #EEE; 
    border-radius: 3px; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
}

来源

2014-01-14 10:12:52 AleVale94

哦，我的天哪：d谢谢。我认为这是一些bug。我会在10分钟内接受你的回答，然后投票;） –

这不是一个错误，一些像ul和p这样的标签具有预设的填充和/或边距值。 – AleVale94

HTML列表 - 宽度问题

回答

相关问题