Question

我目前正在使用此CSS页面来设置我的页面样式，但无论我做什么，我都无法让页脚与我的网页的主要内容对齐。这似乎是一个中心问题。这是我的css：

    .footnav
        {

            padding: 20px 40px 20px 40px; 

            clear:both;
            text-align:center;
            color:white;

            position:relative;
            z-index:100;
        }

        .footnav    li a{
        text-decoration:none;
        display: inline;
        font-weight:bold;

        }

        .footnav li {
        list-style-type: none;


        }

这是以前css风格化的代码，如果需要阅读很多，我道歉。

<div class="footnav" >
    <ul class="nav1">
        <li class="header">Main</li>
        <li><Home</li>

    </ul>
    <ul class="nav2">
        <li class="header">Aventure</li>
        <li>News</li>
        <li>Map</li>
    </ul >
    <ul class="nav3">
        <li class="header">Survival</li>
        <li>Guide</li>
        <li>Gear</li>

    </ul>
</div>

这是内容区域的CSS，我试图用我的页脚排列。

.content
        {
            color:white;
            font-size:12px;
            font-weight:none;
            font-family:sans-serif;
            padding:30px;

            margin:auto;
            margin-top:10px;

            width:70%;
            position:relative;
            z-index:14;

            opacity:1;
            border-style:solid;
            border-width:10px;
            border-style:solid;
            border-width:5px;
            background-color:#000000;
            border-color:#FFFFFF;
            border-right-color:#999999;
            border-left-color:#666666;
            border-bottom-color:#333333;
        }

我知道它涉及尝试占据网页正文宽度的一半，但对于我的页面，我使用的是百分比而不是像素。我不知道如何处理。在此先感谢，我再次为这个冗长的问题道歉，但唯一可以帮助我的方法就是全面了解情况。如果需要更多材料，请询问。

Answer 1

尝试将display: inline-block;添加到.footnav ul。否则ul块将具有100％的宽度 - 这样它们可以彼此相邻，并且可以集中在一起。 inline-block限制了宽度，因此您还应该为此规则添加width设置。所以它是：

.footnav ul {
  display: inline-block;
  width: 200px;
}

（实际宽度取决于这些导航列表中li元素的内容）

Answer 2

在<center>代码</center>中包含页脚内容。它们会自动将任何子内容与页面中心对齐。

无法在html中居我的页脚

2 个答案: