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

让导航响应的问题

0 个答案: