Question

最近我一直在为我和我的朋友制作的网站制作页脚，但文字没有排成一行。我希望版权位于底部，链接和联系信息彼此相邻，有点像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>

Answer 1

我删除了float并将display:inline-block用于您想要并排的元素。然后，我将display:block添加到版权中，使其成为自己的行。我还为Navigation添加了一个H3标签，这样它们就可以与vertical-align: top很好地匹配。

See working jsFiddle demo

<强>输出

enter image description here

<强> 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> Navigation: </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>
        <div class="copyright">
            <p>Copyright 2014 Dylan Maniatakes, Jacob Snarr and Mitchell Conrad</p>
        </div>
    </div>
</footer>

<强> CSS

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

Answer 2

你有一些可疑的造型选择，但没关系！我们都在这里学习。我有JSfiddle你可以用作起点。我基本上给了一个样式规则，让footer内的所有div都成为display: inline-block的属性，如果有足够的空间可以将它们放在一行中。

希望这有帮助！

Answer 3

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

为什么我的页脚中的文字不对齐？

3 个答案: