Question

我对前端开发相对较新，我正在尝试创建一个网页。我使用Materialise.css作为我的框架。我面临的问题：

我已将四个自定义徽标放在彼此之上以交叉渐变。但是，应该显示在它们下面的菜单是从网页的开头放置的。我可以在菜单上使用margin-top，但是，我想知道一个替代解决方案，它会自动将菜单(id="menu1")放在图像之后。请查看图片以了解我正在努力实现的目标。

目前的布局：我想要实现的目标：

此外，materialize.css中是否有侧导航栏的包装类我正在使用的是没有任何包装类（id="menu1"），第二个是隐藏的，必须使用jquery（id="mobnav"）显示。我想要一个始终显示的侧面导航栏。任何帮助将不胜感激。
字体图标和文字未垂直对齐。意味着主页图标和文本“Home”处于不同的高度。所有菜单项都一样。如何最好地解决这个问题？
最后，我想将菜单（id="menu1"）置于class="col s4 m4 l2"的中心。为此，我将div的高度更改为100vh并使用菜单上的类"valign-center"（id="menu1"）。但是，它不起作用。为什么它不起作用？

我错过了什么吗？

Jquery代码（js.script）：

$(window).on("load", function(e) {
  $(".pre-loader").fadeOut("slow");
});

$(function() {

  $(".button-collapse").sideNav();

});

CSS代码（style.css）：

.logo img {
  position: absolute;
}

.nav1 li {
  background-color: yellow;
  margin-top: 10px;
  padding: 5px;
  border-radius: 5px;
}

.flarge {
  font-size: 36px !important;
}

HTML代码：

<!DOCTYPE html> 
<html lang="en-US">

    <head>      
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=0.5">
        <link rel="stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
        <link rel="stylesheet" type="text/css" href="css/materialize.min.css" media="screen,projection">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <title>Test</title> 
    </head> 

    <body>  

        <div class="pre-loader"></div>

        <section id="home" class="page-section">            

            <div class="row">

                <div class="col s4 m4 l2" style="background-color: teal;">

                    <div style="position: relative;" class="logo">
                        <img class="responsive-img" src="https://ibb.co/jVy6Yw" alt="Logo">
                        <img class="responsive-img" src="https://ibb.co/jVy6Yw" alt="Logo">
                        <img class="responsive-img" src="https://ibb.co/jVy6Yw" alt="Logo">
                        <img class="responsive-img" src="https://ibb.co/jVy6Yw" alt="Logo">
                    </div>

                    <div id="menu1" class="hide-on-med-and-down">

                        <ul class="nav1">
                            <a href="#home"><li><i class="material-icons flarge valign" aria-hidden="true">home</i> &nbsp; Home</li></a>
                            <a href="#about"><li><i class="material-icons flarge" aria-hidden="true">help</i> &nbsp; About</li></a>
                            <a href="#events"><li><i class="material-icons flarge" aria-hidden="true">event</i> &nbsp; Events</li></a>
                            <a href="#ourteam"><li><i class="material-icons flarge" aria-hidden="true">people</i> &nbsp; Our Team</li></a>
                            <a href="#contacts"><li><i class="material-icons flarge" aria-hidden="true">account_box</i> &nbsp; Contacts</li></a>    
                        </ul>

                    </div>
                    <nav style="background-color: transparent; box-shadow: 0px 0px 0px 0px;">
                        <a href="#" data-activates="mobnav" class="button-collapse"><i class="material-icons flarge">menu</i></a>
                        <ul class="side-nav" id="mobnav">
                            <a href="#home"><li><i class="material-icons flarge" aria-hidden="true">home</i> &nbsp; Home</li></a>
                            <a href="#about"><li><i class="material-icons flarge" aria-hidden="true">help</i> &nbsp; About</li></a>
                            <a href="#events"><li><i class="material-icons flarge" aria-hidden="true">event</i> &nbsp; Events</li></a>
                            <a href="#ourteam"><li><i class="material-icons flarge" aria-hidden="true">people</i> &nbsp; Our Team</li></a>
                            <a href="#contacts"><li><i class="material-icons flarge" aria-hidden="true">account_box</i> &nbsp; Contacts</li></a>
                        </ul>
                    </nav>

                </div>

            </div>


        </section>                                                                              <!--end of home -->



        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
        <script type="text/javascript" src="js/script.js"></script>

    </body> 
</html>



<!-- end snippet -->

Answer 1

尝试在materialize.css网站上显示的下面添加一个类分隔符，我认为它可以在＆＃34; logo＆＃34;下面创建一个足够大的间隔符。为了你的目标，你试图在这里实现。：）

layout，valign-center和position：绝对在Materialize.css中无法正常工作

1 个答案: