Css 如何停止水平导航栏，请选择2行

在我的单页网站上，导航看起来很糟糕，因为在移动设备上需要两行

这是密码

#navigation {
font-family: 'Open Sans', sans-serif;
position: fixed;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: center;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}

#navigation a:hover {
color: gray;
} 

---

由于左填充和右填充，每个锚点（a）需要30 px。 您需要使用来检测移动浏览器，并将填充更改为较低的值

---

注意：对于您的问题，可能有一个更常见的解决方案。

第一个原因：左右两侧有很多填充物。总共30像素。。每人15英镑

导航a{字体大小：14px；左侧填充：15px；右侧填充：15px； 减少它

second:：看起来您在调整浏览器大小后拍摄了这张照片…css对浏览器大小没有影响..我认为jsp有

third:：减少填充（最好使用左填充或右填充）…这将暂时解决问题..但正如我所说的css（或媒体查询）不适用于浏览器大小调整..如果需要，您将需要jsp…但您可以为不同的屏幕声明不同的css，具有不同的宽度，如：： 对于

.abc{/*.>1000px屏幕的样式…*/}；
@仅介质屏幕和（最大宽度：1000px）{
.美国广播公司{
/*….的风格这里的问题是，在移动设备上，
导航栏
的宽度变小，以便[现在变大]文本适合
导航栏
。为了适合
导航栏
上的文本，您需要缩小字体大小（以及其他人所述的填充）当一个小屏幕设备正在运行您的网站时，或者您需要更改
navbar
的布局。为了检测屏幕大小，您需要在CSS中添加如下内容

@media only screen and (max-width: 999px) {
    /* rules that only apply for canvases narrower than 1000px */
}
@media only screen and (device-width: 768px) and (orientation: landscape) {
    /* rules for iPad in landscape orientation **/
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    /* iPhone, Android rules here */
    #navigation a{
        font-size: 8px;
        padding: 0 0 0 0;
    }
}

好的，那么到目前为止你尝试了什么？你的链接每边都有15px的填充，导致导航的宽度大于屏幕的宽度，导致它在单独的一行上显示其余的链接。你应该研究移动导航解决方案来解决这个问题。虽然我不太了解jspHaving的问题…这是吗需要在主CSS之前或之后覆盖它？？我会把它放在后面，但我认为这不太重要。正如@Ritabrata Gautam所说，如果调整窗口大小，这将不起作用。
@media only screen and (max-width: 999px) {
    /* rules that only apply for canvases narrower than 1000px */
}
@media only screen and (device-width: 768px) and (orientation: landscape) {
    /* rules for iPad in landscape orientation **/
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    /* iPhone, Android rules here */
    #navigation a{
        font-size: 8px;
        padding: 0 0 0 0;
    }
}