Ben, bir duyarlı gezinme çubuğunu yapmaya çalışılıyor ancak bu gerçekleşir:Duyarlı Gezinme Çubuğu Bug
o kadar navbar bu metni yapmaz yapma konusunda gitmek nasıl kırpma şey?
İşte benim kod (o arada yaklaştıkça daha da kötüleşiyor):
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: Böyle bir şey
#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;
}
Gezinme bağlantılarınızda neden görüntüleme birimleri kullanıyorsunuz? –
Onları kullanıyordum, böylece pencereyi yeniden boyutlandırdığınızda, metin yeniden boyutlandırılıyor, başka bir birim kullanmalı mıyım? – avghdev
Viewport birimlerinin büyük başlıklar halinde olması durumunda daha iyi kullanıyorum. Metni orantılı olarak yeniden boyutlandırmanız gerekmeyen ana yazı tipi/satır yüksekliğiniz için, em veya rem ile daha iyi çalışabilirsiniz. –