0

我正在创建一个响应式设计，但我一直在努力解决一个问题：我有一个使用 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 请帮忙

4

3 回答 3

0

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

div ul li a {
    width: 25%;
    display: block;
}
于 2013-10-26T21:16:01.513 回答
0

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

这是一个工作演示。

于 2013-10-26T21:31:47.787 回答
0

另一种方法是使用最小/最大字体大小，我认为在这里设置父级会更好，因为我们正在根据父级“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' });
于 2013-10-26T22:09:17.573 回答