html - 让导航响应的问题

Question

我正在努力使我的导航栏在移动设备上看起来不错，并使其响应迅速。然而，现在通过移动设备看起来很糟糕，而且一切都混在一起了。无论如何，我可以在不使链接变小的情况下使它看起来更好吗？

请在我为大家制作的页面上通过手机查看。

sundayfundayleague.com/show_nav.php

出于某种原因，在我创建的页面中，所有这些链接都没有显示在导航栏中..

<li>
                <a href="selection.php">Draft Selection</a>
            </li>
        </ul>   
    </div>
    <div class="nav_right">
        <ul>
            <li>
                <a href="progfile.php?user=<?php echo escape($user->data()->username); ?>"><?php echo escape($user->data()->username); ?></a>
            </li>
            <li>
                <a href="messages.php">Messages</a>
            </li>
            <li>
                <a href="dashboard.php">Admin</a>
            </li>
            <li>
                <a href="logout.php">Log Out</a>
            </li>
        </ul>
    </div>

通常它只会压缩所有链接，看起来很糟糕。

我该怎么做才能使所有内容都显示出来并看起来不错？

这是我对标题/导航栏的媒体查询...

.spectator_header {
    position: relative;
    height: 200px;
}
.spectator_nav {
    height: 75px;
    background-color: #800000;
    left: 2%;
    display: inline;
    bottom: 0;
    position: absolute;
    width: 95%;
    font-size: .7em;
    font-style: Helvetica;
    -moz-border-radius: 0px;
    -webkit-border-radius: 15px 15px 0px 0px;
    border-radius: 15px 15px 0px 0px;
    -webkit-box-shadow: 0px 0px 16px #C0C0C0;
    -moz-box-shadow: 0px 0px 16px #C0C0C0;
    box-shadow: 0px 0px 16px #C0C0C0;
}
.spectator_nav  li a {
    text-decoration: none;
    display: block;
}
.spectator_nav li:hover ul {
    display: block;
}
.spectator_nav ul {
    padding: 0px;
}
.spectator_nav li {
    position: relative;
    float: left;
    list-style-type: none;
    padding: 25px 4px;
}
.spectator_nav li:first-child {
    margin-left: 5px;
}
.spectator_nav li:last-child {
    margin-right: 5px;
}
.spectator_nav ul:after {
    content: ".";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
}

Answer 1

移动导航可能非常棘手，有很多方法可以实现。我建议查看一些资源，例如 This Is Responsive或 CSS-Tricks获得一些关于如何解决这个问题的想法。有很多选择，所以找到适合您的选择。

不是所有链接都显示的原因是最后一个链接换行了。由于容器的高度固定为 75px，并且 <li> 周围有很多内边距。 s 你看不到第二行的链接。这就是为什么移动导航很棘手的部分原因，当您有太多链接无法舒适地放在水平线上时，您必须决定如何处理它。

你想让你的导航增长到多行，还是切换到汉堡包或选择菜单？您是否想无论如何都将所有链接都塞进一行？您是否需要允许在将来添加更多导航链接或更改字体大小或粗细？这会增加导航列表的长度并影响您要采用的方法。如果您有更多信息，我可以为您指出一个好的解决方案，但如果您的问题只是“我如何使其响应？”那么你需要先问更多问题。