Question

我正在创建一个响应式设计，我一直在努力解决一个问题：我有一个垂直菜单，我使用的是html列表。我想将字体大小调整为可用的宽度。为此我使用fittext.js这很棒，但是我不能让我的垂直列表工作，我得到一个列表对角线，而不是像它应该的那样从上到下。

HTML：

<div class="main-nav">
    <ul>
        <li><a href="”#”">Home</a></li>
        <li><a href="”#”">The Next Page</a></li>
        <li><a href="”#”">Another Page</a></li>
        <li><a href="”#”">Last Page</a></li>
    </ul>
</div>

CSS：

div ul li a {
    width: 25%;
    float: left;
}

如果您想快速测试我的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>FitText</title>

    <style type="text/css">
div ul li a {
    width: 25%;
    float: left;
}
    </style>
    <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>

<body>

<div class="main-nav">
    <ul>
        <li><a href="”#”">Home</a></li>
        <li><a href="”#”">The Next Page</a></li>
        <li><a href="”#”">Another Page</a></li>
        <li><a href="”#”">Last Page</a></li>
    </ul>
</div>  
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="jquery.fittext.js"></script>
    <script type="text/javascript">
    $(".main-nav ul li a").fitText();
    </script>

</body>
</html>

您可以在这里找到Fittext：https://github.com/davatron5000/FitText.js 请帮忙

Answer 1

浮动a标签可能是造成对角线怪异的原因。这不行吗？

div ul li a {
    width: 25%;
    display: block;
}

Answer 2

正如wannabe_rockgod建议的那样，浮动的a元素导致了问题，但你也必须更改jQuery选择器。

这里是working demo。

Answer 3

另一种方法是使用min / max font-size，我认为设置父级会更好，因为我们根据父级'li'宽度调整内部元素'a'

CSS

.main-nav li {
    width: 25%;
}

.main-nav li a {
    display: block;
}

JS

$('.main-nav li a').fitText(.5, { minFontSize: '16px', maxFontSize: '32px' });

Fittext.js在列表中

3 个答案: