0

这里有我的网站： http: //gyazo.com/56e069ebf8b5bd61ee30523886180b88

导航栏存在许多问题。

  1. 您可以看到文本或导航栏未水平居中，如悬停所示（顶部和底部相等）

  2. 文本之间有太多空间，（而且这个间距是我发现的唯一方法，在突出显示或悬停时文本不会四处移动。

  3. 下拉菜单中的 <.br> 间距过大。

所以对于 1. 有没有办法让文本或导航栏（不确定是什么原因）居中，这样悬停看起来更平等（水平）

2.有没有办法可以缩小文本之间的间隙，同时仍然保持相同的填充设置，所以当我使用悬停功能时它不会移动文本。

还有 3. 有没有办法让 <.br> 的空间减少一半

如果有帮助，我还添加了一个 jsfiddle： //jsfiddle.net/d1a5eshs/

导航栏的 HTML 代码：

<!--TOP NAV BAR SECTION-->
            <div id="nav_bar">
                <ul>
                    <li><a href="index.html">HOME</a>
                    </li>
                    <li><a href="status.html">STATUS</a>
                    </li>
                    <li><a href="info.html">INFO</a>
                    </li>
                    <li><a href="#">GAMEMODES</a>

                        <ul>
                            <li><a href="survival.html">SURVIVAL</a>
                            </li>
                            <li><br><a href="pure-pvp.html">PURE-PVP</a>
                            </li>
                            <li><br><a href="gamesworld.html">GAMESWORLD</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="rules.html">RULES</a>

                    </li>
                    <li><a href="vote.html">VOTE</a>

                    </li>
                    <li><a href="contact.html">CONTACT</a>

                    </li>
                </ul>
            </div>

导航栏的 CSS：

/*TOP NAV BAR SECTION*/
#nav_bar {
    background-color: #a22b2f;
    padding:1px;
    box-shadow: 0px 2px 10px;
    height:45px;
    }         
#nav_bar ul li {
    display: inline-block;    
}
#nav_bar ul li a {
    color: white;
    text-decoration:none;
    font-weight:bold;
    font-size:15px;
    margin-left:10px;
    padding-bottom:13px;
    padding-top:17px;
    padding-left:10px;
    padding-right:10px;
    margin-bottom:30px;
}
#nav_bar ul li ul {
    display: none;   
}
#nav_bar>ul>li>a:hover {
    background:#8c1b1f;
    padding-bottom:13px;
    padding-top:13px;
    padding-left:10px;
    padding-right:10px;   
}
#nav_bar>ul>li>ul>li>a:hover {
    background:#c9c9c9;
    padding-bottom:5px;
    padding-top:5px;
    padding-left:5px;
    padding-right:5px;      
}
#nav_bar ul li:hover ul {
    display: block;
    position: absolute;
    padding: 0px;
    background: #e2e2e2;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:0px;
    padding-right:10px;
    border: 1px solid black;
    border-radius:5px;
}
#nav_bar ul li:hover ul li {
    display: block;

}
#nav_bar ul li:hover ul li a {
    color: black;
    font-size:12px;
    font-weight:bol;
    margin-left:-20px;
    padding-bottom:5px;
    padding-top:5px;
    padding-left:5px;
    padding-right:5px;
}
4

1 回答 1

0

你不必
在你的内部列表中使用。调整行高以获得所需的结果。 http://www.jsfiddle.net/9058vefk 

 #nav_bar ul li:hover ul {
  display: block;
  position: absolute;
  padding: 0px;
  background: #e2e2e2;
  padding-top:10px;
  padding-bottom:10px;
  padding-left:10px;
  padding-right:10px;
  border: 1px solid black;
  border-radius:5px;
  line-height:1.5em; /* added this- you can change it th=o what you want */
  height:5em;
}

就主 ul li 居中而言，将整个 div (nav_bar) 划分为 7 个相等的较小 div，并将该空间应用于每个导航项。

于 2014-10-24T20:43:51.607 回答