Question

仍然很新，所以提前道歉。

在我的页脚中，桌面视图工作正常。和景观移动视图一样。下面是这两种观点的看法

但在移动人像中，社交媒体图标缺失，哪里出错？

我的页脚的HTML代码

<footer class="nav navbar-fixed-bottom navbar-default">
                <div class="container-fluid">
                    <p>&copy; 2017 Example Example</p>
                    <ul>
                        <li><a href=""><span class="fa fa-twitter"></span></a></li>
                        <li><a href=""><span class="fa fa-facebook"></span></a></li>
                        <li><a href=""><span class="fa fa-instagram"></span></a></li>
                        <li><a href=""><span class="fa fa-snapchat"></span></a></li>
                        <li><a href=""><span class="fa fa-youtube"></span></a></li>
                    </ul>
                </div>
            </footer>

页脚样式的CSS

footer {
    background-color: #000000;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
}

footer p {
    float: left;
    text-align: center;
    margin-top: 15px;
}

footer ul {
    list-style: none;
    display: flex;
    flex: 1;
    flex-direction: row;
    float: right;
    font-size:35px;
    margin-top: 2px;
}

.fa-twitter {
    margin-right:10px;
    color: #fff;
}

.fa-twitter:hover{
    color: #00aced;
}

.fa-facebook {
    margin-right:10px;
    color: #fff;
}

.fa-facebook:hover{
    color: #3b5998;
}

.fa-instagram {
    margin-right:10px;
    color: #fff;
}

.fa-instagram:hover{

    background-image: linear-gradient(45deg, #fccc63, #fbad50, #e95950, #cd486b, #8a3ab9, #4c68d7);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}

.fa-snapchat {
    margin-right:10px;
    color: #fff;
}

.fa-snapchat:hover{
    color: #fffc00;
}

.fa-youtube {
    margin-right:5px;
    color: #fff;
}

.fa-youtube:hover{
    color: #cb2027;
}

任何帮助将不胜感激！

Answer 1

很可能带有社交图标的ul根本不适合p标记文本旁边的页脚宽度，并被推到下面一个新行（两者都是浮动的）。但由于高度是固定的（50px），它是隐藏的。尝试将footer的高度更改为类似于100px的声音以进行测试，然后您将看到这是否正在发生。如果是的话，你必须让所有东西都小一点（在媒体查询中），这样它就可以放在一行中。

Answer 2

您的问题是您的社交图标太大，因此整个<ul>正在包裹到下一行，但由于您在<footer>上有一个已定义的高度，它会落在视口之外。尝试将图标缩小，或者对<p>执行某些操作，使其文本以更窄的宽度包裹两行。

Answer 3

您可能想尝试将身体标记放在像

这样的所有内容上

var net = require('net').Socket();
var sockets = [];

module.exports.Socket = function (port, ip) {
        var Client = net.connect(port, ip);
        sockets.push(Client);
    }
    return Client;
}

这可能会有所帮助。

您可能想要查看的另一种方法是使用flexbox为您提供无序列表如下所述：[1]：Flexbox with Unordered list 查尔斯

页脚内容未在移动视图中显示

3 个答案: