如何停止水平导航栏需要2行

Question

在我的单页网站上导航看起来很糟糕，因为它在移动设备上需要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;
} 

Answer 1

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

P.S。：您的问题可能有更常见的解决方案。

Answer 2

第一个原因:: 左右两侧有很多填充...总共30px ..每个15 ..

  

导航a {font-size：14px; padding-left：15px; padding-right：15px;

减少它......

second :: 似乎你在调整浏览器大小后拍了那张照片... css对浏览器调整大小没有影响..我觉得jsp有......

第三个:: 减少填充（更好地使用padding-left或padding-right）..这将解决问题暂时..但正如我说css（或媒体查询）不起作用在浏览器调整大小..如果你想要你将需要jsp ...但你可以为不同的屏幕声明不同的CSS与不同的宽度，如::  <div class="abc"></div>

 .abc{/*...style for >1000px screen...*/};
  @media only screen and (max-width: 1000px) {
   .abc{
   /*.... style for <1000px screen....*/
   }
  }

Answer 3

这里的问题是，在移动设备上navbar的宽度变小，[现在大]文字适合navbar。为了使文本适合navbar，您需要缩小字体大小（以及其他人已经说明了填充）当小型屏幕设备运行您的网站时，或者您需要更改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;
    }
}