Materialise 链接不适合导航

Question

问题：

使用 Materialize CSS 在导航中安装五个链接。现在，三个链接都适合，我什至可以添加第四个。但是当我总共添加五个链接时，最后两个链接断开了。

最小工作示例 (MWE):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
    <title>Materialize</title>
    <!-- CSS  -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css" rel="stylesheet">
</head>
<body>
    <header>
        <nav class="indigo" role="navigation">
            <div class="nav-wrapper container">
                <a id="logo-container" href="#" class="brand-logo"><i class="material-icons md-36">flight_takeoff</i> Logo</a>
                <ul class="right hide-on-med-and-down">
                    <li class="active"><a href="javascript:void(0)">Home</a></li>
                    <li><a href="javascript:void(0)">About</a></li>
                    <li><a href="javascript:void(0)">Contact</li>
                    <li><a href="javascript:void(0)"><i class="material-icons left">add_circle</i> Registration</a></li>
                    <li><a href="javascript:void(0)"><i class="material-icons left">account_circle</i> Login</a></li>
                </ul>
            </div>
        </nav>
    </header>
</body>
</html>

期望输出：

让所有五个链接都适合右侧的导航。

Answer 1

这是因为您的 <a href="#">Contact 缺少关闭标记。这是更新后的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
    <title>Materialize</title>
    <!-- CSS  -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css" rel="stylesheet">
</head>
<body>
    <header>
        <nav class="indigo" role="navigation">
            <div class="nav-wrapper container">
                <a id="logo-container" href="#" class="brand-logo"><i class="material-icons md-36">flight_takeoff</i> Logo</a>
                <ul class="right hide-on-med-and-down">
                    <li class="active"><a href="javascript:void(0)">Home</a></li>
                    <li><a href="javascript:void(0)">About</a></li>
                    <li><a href="javascript:void(0)">Contact</a></li> <!-- Note the </a> closing tag -->
                    <li><a href="javascript:void(0)"><i class="material-icons left">add_circle</i> Registration</a></li>
                    <li><a href="javascript:void(0)"><i class="material-icons left">account_circle</i> Login</a></li>
                </ul>
            </div>
        </nav>
    </header>
</body>
</html>

Materialise 链接不适合导航

Materialize links do not fit inside navigation

html

css

nav

navbar

materialize