Question

我需要在div中创建一个与浏览器窗口一起缩放的菜单。文本大小根据窗口的大小进行调整（使用fittext.js），外部DIV始终是窗口高度的15％。由于100％线高不起作用，还有其他选择。

同时我在这里可以做些什么来使文本链接跨越包含DIV宽度的100％？（所以链接覆盖整个div之间的间距相等）

如果需要，jQuery选项很好。

Here is a fiddle I made with an example of my code

HTML源

<nav id="navigation">
<a href="#welcome" class="nav_button"><span>Welcome</span></a>
<a href="#about" class="nav_button"><span>About</span></a>
<a href="#work" class="nav_button"><span>Work</span></a>
<a href="#contact" class="nav_button"><span>Contact</span></a>    
</nav>

CSS源

#navigation {
width: 80%;
height: 15%;
position: fixed;
top: 5%;
left: 10%;
background: #ccc;
}
.nav_button {
height: 100%;
width: 20%;
position: relative;
display: inline-block;
text-align: center;
line-height: 100%;
}

Answer 1

$btn = $('.nav_button');
$btn.css('line-height', $btn.height() + 'px');

在您的示例中正常工作：）

可伸缩div中的100％行高文本

1 个答案: