私は、応答ナビゲーションバーを作成しようとしてるがしかし、これが起こる:応答ナビゲーションバーには、バグ
私はそれがそうナビゲーションバーには、このテキストをしない作りに行くかどうクリッピングの事?
は、ここに私のコードです(それが一緒に近づくにつれて、それは悪化する):
HTML
<div id="menuContainer">
<a href="index.html"><img id="logoimg" src="imgs/logo.png" height="70px" /></a>
<ul class="menul">
<li class="menuli"><a target="_blank" href="http://eastofseattle.bpt.me/">Buy Tickets</a></li>
<li class="menuli"><a href="#">About</a></li>
<li class="menuli"><a href="sponsor.html">Sponsors</a></li>
<li class="menuli"><a href="index.html">Home</a></li>
</ul>
</div>
CSS:それはこのような何か
#menuContainer {
background-color: white;
margin: 2vw;
height: 10vh;
position: relative;
}
.menul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.menuli {
display:inline-block;
float: right;
}
.menuli a {
font-size: 2.7vh;
width: 9vw;
height: 10vh;
text-align: center;
font-family: "Lato", Helvetica, Arial, sans-serif;
color: black;
text-decoration: none;
display: inline-block;
white-space: nowrap;
overflow: hidden;
line-height: 10vh;
}
.menuli a:hover {
background-color: #ff3333;
}
#logoimg {
float: left;
height: 9.23vh;
display: inline;
margin-right: 20px;
vertical-align: middle;
position:absolute;
top:0;
bottom:0;
margin:auto;
}
ナビゲーションリンクでビューポートユニットを使用しているのはなぜですか? –
私はそれらを使用していたので、ウィンドウのサイズを変更すると、テキストがそのサイズに合わせて変更されます。別のユニットを使用する必要がありますか? – avghdev
ビューポートユニットの方が、大きな見出しを持つ方が良いでしょう。比例的にテキストのサイズを変更する必要がないメインのフォントサイズ/行高さでは、emまたはremでうまくいくことができます。 –