Question

简而言之，标题类应该是整个屏幕的黑线。在HTML中，它将是一个列表。列表的子项将被设置为按钮样式，并应在页面的前20％后开始。在某个地方，这是非常错误的，因为：

列表中的孩子根本没有样式（边距）
页面自我延伸。

以下是完整的源代码：

<!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>

Answer 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;      
}

Answer 2

我看到的一些问题：

.header:first-child已应用于<ul>，因此请将其更改为.header>li:first-child并定位第一个<li>并设置其左边距
您在.header中将字体大小设置为3％，而<li>继承了该字体大小，确保这是您想要的
同时在padding:0设置.header以阻止水平滚动条。

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

标题延伸而不是

2 个答案: