Question

我的导航设备存在问题，因为它非常宽，以至于它不断向我提供额外的空间。我不知道为什么它如此宽，我尝试用一些代码来减小它的使用量，但我正在使网站响应，当我将代码降低到大约320px时，它是基于屏幕大小使得单词确实很难看到并点击。实际上，当我测试它时，它在我的本地计算机上看起来很好，但是把它放在服务器上并且实际上在我的手机上查看它会让它看起来很糟糕。任何人之前都有这样的问题，或者可能看到我做错了什么？ JSFiddle

HTML5

<div id="header-banner">
    <div class="wrapper">
        <header>    <a href="index.html">
            <img id="logo" alt="PT Logo" src="Images/PT-logo.png"></a>

            <nav id="main-nav">
                <ul id="nav">
                    <li><a href="index.html">Home</a>
                    </li>
                    <li><a href="#">CityName</a>
                    </li>
                    <li><a href="#">CityName</a>
                    </li>
                </ul>
            </nav>
        </header>
    </div>
</div>

CSS3

/* ===== HEADER NAVIGATION AREA ===== */
 #main-nav {
    position: relative;
    left: 50%;
    bottom: 20px;
    height: 40px;
    background-color: blue;
}
#nav {
    list-style: none;
    margin: auto;
}
#nav li {
    float: left;
    display: inline;
}
#nav li a {
    color: #DB7093;
    display: block;
    padding: 3px 15px;
    height: 20px;
}
#nav li a:hover {
    background-color: #DB7093;
    color: #F0F8FF;
    text-shadow: none;
}

Answer 1

尝试删除margin:auto，然后将padding: 3px 15px修改为padding: 3px 1px，看看这是否是您的问题。

这可能是解决方案：

 

     #main-nav {
        position: relative;
        left: 50%;
        width:350px;
        bottom: 20px;
        height: 40px;
        background-color: blue;
    }

将width属性添加到#main-nav。

Answer 2

JSFiddle示例：http://jsfiddle.net/8K2bL/

/* MOBILE - 649 = logo + nav */
@media only screen and (max-width: 649px) {
#logo{display:block !important;}
#main-nav{
    margin:0 auto !important;
    bottom:auto !important;
    right:auto !important;
}
header{
    width:320px !important;
    margin:0 auto;
}
}

#logo{
width:auto;
height:100%;
display:inline;
}
header{
height:100px;
width:100%;
position:relative;
}

/* ===== HEADER NAVIGATION AREA ===== */
 #main-nav {
float:right;
position:absolute;
bottom:0;
right:0;
}

Answer 3

尝试更好地构建html。我更新了你的js小提琴并重新构建了html，添加了几个类并修改了现有的#main-nav。您可以在此jsfiddle

中找到它

我还建议您查看bootstrap的响应式CSS布局

导航宽度导致页面额外空间向右

3 个答案: