0

长话短说，标题类应该是横跨整个屏幕的黑线。在 HTML 中，它将是一个列表。列表的子项将被设置为按钮，并且应该在页面的前 20% 之后开始。在某个地方，这是非常错误的，因为：

  1. 列表子项根本没有样式（边距）

  2. 页面延伸了很多。

这是整个源代码：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    html, body {
         padding: 0;
         background-color:#FFFCF2;
         margin: 0 auto;
         }

        .header {
          list-style:none;  
        width:100%;
        height:65px;
        font-size:3%;   
        background: black;
         }

        .header:first-child {
        margin-left:20%;
        }

    .headerChild {
        margin-left:0;
        float:left;
         height:65px;
         width:10%;
         background: white;
    }   
    </style>
</head>
<body>
         <ul class="header">
        <li class="headerChild"></li>
        <li class="headerChild"></li>
        <li class="headerChild"></li>
        </ul>
</body>
</html>
4

2 回答 2

1

将您的 CSS 替换为以下内容：

html, body {
     padding: 0;
     background-color:#FFFCF2;
     margin: 0 auto;
}

.header {
    list-style:none;  
    width:100%;
    height:65px;
    font-size:3%;   
    background: black;
    padding-left: 20%;
}

.header:first-child {       
}

.headerChild {
    margin-left:0;
    float:left;
     height:65px;
     width:10%;
     background: white;      
}
于 2013-07-05T16:27:38.420 回答
0

我看到的几个问题：

  • .header:first-child应用于<ul>，因此将其更改为.header>li:first-childand 将针对第一个<li>并设置其左边距
  • 您将字体大小设置为 3%.header并<li>继承它，确保这是您想要的
  • 也设置padding:0为.header防止水平滚动条。

这是一个Fiddle供您查看。我在<li>和 文本周围放置了红色边框，以便您可以看到它们。

于 2013-07-05T16:31:30.487 回答