Html 为什么'；我页脚中的文字是否对齐？_Html_Css_Footer

Html 为什么'；我页脚中的文字是否对齐？

html css

Html 为什么'；我页脚中的文字是否对齐？,html,css,footer,Html,Css,Footer,最近，我和我的朋友正在为一个网站制作一个页脚，但是文本没有对齐。我希望版权在底部，链接和联系信息彼此相邻，有点像stackoverflow的页脚。页脚并没有像我想象的那样工作。我尝试了很多方法来改变文本的位置，但似乎不起作用。这应该是一个简单的修复，所以如果你有时间，请看看代码。代码如下： <!DOCTYPE html> <html> <footer> <div class="footer"> <div class="

最近，我和我的朋友正在为一个网站制作一个页脚，但是文本没有对齐。我希望版权在底部，链接和联系信息彼此相邻，有点像stackoverflow的页脚。页脚并没有像我想象的那样工作。我尝试了很多方法来改变文本的位置，但似乎不起作用。这应该是一个简单的修复，所以如果你有时间，请看看代码。代码如下：

<!DOCTYPE html>
<html>
<footer>
    <div class="footer">
        <div class="contact">
            <h3> Contact Us: </h3>
            <p>ourEmail@ourSite.com</p>
        </div>
        <div class="popular">
            <h3> Popular Games: </h3>
            <p><a href="#">Happy Wheels</a></p>
            <p><a href="#">Flappy Bird</a></p>
            <p><a href="#">Impossible Quiz</a></p>
        </div>
        <div class="footerNav">
            <h3>Pages</h3>              
            <p><a href="http://www.freeninjagaming.site50.net">Home</a></p>
            <p><a href="#">Games</a></p>
            <p><a href="#">About Us</a></p>
        </div><br>
        <div class="copyright">
            <p> Copyright 2014 Dylan Maniatakes, Jacob Snarr and Mitchell Conrad </p>
        </div>
        </div>
        <style>
        footer{
            clear: both;
            font-family: Arial;
            text-align: center;
            border-top: 1px solid black;
        }
        .contact {
            float: left;
        }
        a {
            text-decoration: none;
            color: #c23b3b
        }
        a:hover{
            color: darkred;
        }
        .footerNav {
            float: right;
        }
        </style>
</footer>
</html>


联系我们：
ourEmail@ourSite.com
热门游戏：



页





版权所有2014 Dylan Maniatakes、Jacob Snarr和Mitchell Conrad
页脚{
明确：两者皆有；
字体系列：Arial；
文本对齐：居中；
边框顶部：1件纯黑；
}
.联系方式{
浮动：左；
}
a{
文字装饰：无；
颜色：#c23b3b
}
a:悬停{
颜色：深色；
}
.页脚导航{
浮动：对；
}

我删除了

float

并将

display:inline block

并排使用到所需的元素。然后我在版权中添加了

display:block

，使其成为自己的一行。我还为导航添加了一个H3标签，这样它们就可以很好地与

垂直对齐：top

对齐

输出

HTML

你有一些值得怀疑的款式选择，但没关系！我们都是来学习的。我有一个可以作为起点的例子。我基本上给出了一个样式规则，为

footer

中的所有div指定一个

display:inline block

属性，如果有足够的空间容纳它们，它会将它们放在一行中

希望这有帮助


<!DOCTYPE html>
<html>
<footer>
    <div class="footer">
        <div class="contact">
            <h3> Contact Us: </h3>
            <p>ourEmail@ourSite.com</p>
        </div>
        <div class="popular">
            <h3> Popular Games: </h3>
            <p><a href="#">Happy Wheels</a></p>
            <p><a href="#">Flappy Bird</a></p>
            <p><a href="#">Impossible Quiz</a></p>
        </div>
        <div class="footerNav">
            <h3>Pages</h3>              
            <p><a href="http://www.freeninjagaming.site50.net">Home</a></p>
            <p><a href="#">Games</a></p>
            <p><a href="#">About Us</a></p>
        </div><br>
        <div class="copyright">
            <p> Copyright 2014 Dylan Maniatakes, Jacob Snarr and Mitchell Conrad </p>
        </div>
        </div>
        <style>
        footer{
            clear: both;
            font-family: Arial;
            text-align: center;
            border-top: 1px solid black;
        }
        .contact, .popular, .footerNav {
            float: left;
        }

        .copyright {
          clear:both;
          float:left;
          }

        a {
            text-decoration: none;
            color: #c23b3b
        }
        a:hover{
            color: darkred;
        }

        .footer div {
           margin-left:10px;
          margin-right:10px;
          }
        </style>
</footer>
</html>

联系我们：
ourEmail@ourSite.com
热门游戏：



页





版权所有2014 Dylan Maniatakes、Jacob Snarr和Mitchell Conrad
页脚{
明确：两者皆有；
字体系列：Arial；
文本对齐：居中；
边框顶部：1件纯黑；
}
.contact、.popular、.footerNav{
浮动：左；
}
.版权所有{
明确：两者皆有；
浮动：左；
}
a{
文字装饰：无；
颜色：#c23b3b
}
a:悬停{
颜色：深色；
}
.footer div{
左边距：10px；
右边距：10px；
}

 footer {
     clear: both;
     font-family: Arial;
     text-align: center;
     border-top: 1px solid black;
 }
 footer div {
     display: inline-block;
     vertical-align: top;
     margin-right: 20px;
 }
 footer div:last-child {
     margin-right: 0;
 }
 footer .copyright {
     display: block;
 }
 .contact {
 }
 a {
     text-decoration: none;
     color: #c23b3b
 }
 a:hover {
     color: darkred;
 }

<!DOCTYPE html>
<html>
<footer>
    <div class="footer">
        <div class="contact">
            <h3> Contact Us: </h3>
            <p>ourEmail@ourSite.com</p>
        </div>
        <div class="popular">
            <h3> Popular Games: </h3>
            <p><a href="#">Happy Wheels</a></p>
            <p><a href="#">Flappy Bird</a></p>
            <p><a href="#">Impossible Quiz</a></p>
        </div>
        <div class="footerNav">
            <h3>Pages</h3>              
            <p><a href="http://www.freeninjagaming.site50.net">Home</a></p>
            <p><a href="#">Games</a></p>
            <p><a href="#">About Us</a></p>
        </div><br>
        <div class="copyright">
            <p> Copyright 2014 Dylan Maniatakes, Jacob Snarr and Mitchell Conrad </p>
        </div>
        </div>
        <style>
        footer{
            clear: both;
            font-family: Arial;
            text-align: center;
            border-top: 1px solid black;
        }
        .contact, .popular, .footerNav {
            float: left;
        }

        .copyright {
          clear:both;
          float:left;
          }

        a {
            text-decoration: none;
            color: #c23b3b
        }
        a:hover{
            color: darkred;
        }

        .footer div {
           margin-left:10px;
          margin-right:10px;
          }
        </style>
</footer>
</html>