个人中心
gpt4 book ai didi

html - header 延伸而不是

转载 作者：太空宇宙 更新时间：2023-11-04 14:49:58 24 4
gpt4 key购买 nike

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

  1. 列表子项根本没有样式(边距)

  2. 页面本身拉伸(stretch)很多。

这里是完整的源代码:

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

最佳答案

将您的 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;      
}

关于html - header 延伸而不是，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17493113/

24 4 0
文章推荐： c++ - 查找指针指向的数组的大小
文章推荐： css - 左 div 滚动和右 div 拉伸(stretch)布局高度/跨浏览器兼容？
文章推荐： java - 如何设置 f :selectItem in a specific option after a p:commandButton action?
文章推荐： c++ - C++ 中的 foo::bar::baz() 是什么意思？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com