实现链接不适合导航答案

【问题标题】：Materialize links do not fit inside navigation实现链接不适合导航
【发布时间】：2017-03-30 14:11:55
【问题描述】：

问题：

使用 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>

期望的输出：

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

【问题讨论】：

标签： html css navbar nav materialize

【解决方案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>

【讨论】：