Html 物化链接不适合内部导航_Html_Css_Navbar_Nav_Materialize

Html 物化链接不适合内部导航

html css

Html 物化链接不适合内部导航,html,css,navbar,nav,materialize,Html,Css,Navbar,Nav,Materialize,问题: 使用MaterializeCSS在导航中安装五个链接。现在，三个链接是合适的，我甚至可以添加第四个链接。但当我加上总共五个链接时，最后两个就断了最小工作示例MWE：期望输出：使所有五个链接都适合右侧的导航。这是因为您的联系人缺少关闭标签。以下是更新的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="vie

问题:

使用MaterializeCSS在导航中安装五个链接。现在，三个链接是合适的，我甚至可以添加第四个链接。但当我加上总共五个链接时，最后两个就断了

最小工作示例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</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>

<!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>