0

ブートストラップを使用してシンプルな Web サイトを構築していますが、ナビゲーション バーの高さに問題があります。したがって、次のようにタイトルが長すぎない場合、ナビゲーション バーは問題なく表示されます。
ここに画像の説明を入力

ただし、リンク名の 1 つが長くなりすぎると、ナビゲーション バーは次のようになります。
ここに画像の説明を入力

これは私のHTMLコードです:

<div class="container">
    <div class="masthead">
        <div class="navbar">
            <div class="navbar-inner">                    
                <ul class="nav">
                    <li class="active"><a href="../Home.html">Home</a></li>
                    <li><a href="../About.html">About</a></li>
                    <li><a href="../Officers.html">Officers</a></li>
                    <li><a href="../Join.html">Join</a></li>
                    <li><a href="../Calendar.html">Calendar</a></li>
                    <li><a href="../Contact.html">Contact</a></li>
                    <li><a href="../WSP.html">Wsdf asdkfjlaksjdf laksjdflkjasdf</a></li>
                    <li><a href="../Members.html">Members</a></li>
                </ul>                    
            </div><!-- /.navbar-inner -->
        </div><!-- /.navbar -->
    </div><!-- /.masthead -->
</div><!-- /.container -->

私のCSSは次のようになります。

/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
    padding: 0;
}
.navbar .nav {
    margin: 0;
    display: table;
    width: 100%;
}
.navbar .nav li {
    display: table-cell;
    width: 1%;
    float: none;
}
.navbar .nav li a {
    font-weight: bold;
    text-align: center;
    border-left: 1px solid rgba(255,255,255,.75);
    border-right: 1px solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
    border-left: 0;
    border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
    border-right: 0;
    border-radius: 0 3px 3px 0;
}

ナビゲーションバーのグラフィックが適切に調整されるように CSS コードを調整するにはどうすればよいですか?

4

1 に答える 1

2 
.navbar .nav li {
    display: table-cell;
    width: 1%;
    float: none;
    border-left: 1px solid rgba(255,255,255,.75);
    border-right: 1px solid rgba(0,0,0,.1);
    vertical-align:middle;
}
.navbar .nav li a {
    font-weight: bold;
    text-align: center;

}
.navbar .nav li:first-child {
    border-left: 0;
    border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child {
    border-right: 0;
    border-radius: 0 3px 3px 0;
}

.navbar .nav > .active {
  color: #555555;
  text-decoration: none;
  background-color: #e5e5e5;
  -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
     -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
          box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}

これを試してみてください。問題が解決する可能性があります

于 2013-04-13T07:55:18.863 に答える