Materialise CSS select 下拉箭头移位

Question

下面是实体化 css 的屏幕截图，如下所示： https://materializecss.com/select.html

但由于某种原因，我在列表下方而不是侧面看到了下拉菜单的小箭头。

我正在使用 Django 3。

我该如何解决这个问题？

下面是渲染页面的HTML：

<html><head>
      <meta name="viewport" content="width = device-width, initial-scale = 1">
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>




          <script>
    document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('select');
        var instances = M.FormSelect.init(elems);
    });
      </script>
</head>
<body class="vsc-initialized">
<nav>
    <div class="nav-wrapper">
        <a href="#" class="brand-logo right">SIW</a>
        <ul id="nav-mobile" class="left hide-on-med-and-down">
            <li><a href="/">Home</a></li>
            <li><a href="/Contact">Contact</a></li>
        </ul>
    </div>
</nav>

    <div class="section">
    <div class="row">
        <form class="col s12">


            <div class="input-field col s4">
                <div class="select-wrapper"><input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-07dbac11-476d-4358-8e69-a8d561e0df80"><ul id="select-options-07dbac11-476d-4358-8e69-a8d561e0df80" class="dropdown-content select-dropdown" tabindex="0" style=""><li class="disabled selected" id="select-options-07dbac11-476d-4358-8e69-a8d561e0df800" tabindex="0"><span>Choose your option</span></li><li id="select-options-07dbac11-476d-4358-8e69-a8d561e0df801" tabindex="0"><span>Option 1</span></li><li id="select-options-07dbac11-476d-4358-8e69-a8d561e0df802" tabindex="0"><span>Option 2</span></li><li id="select-options-07dbac11-476d-4358-8e69-a8d561e0df803" tabindex="0"><span>Option 3</span></li></ul><svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg><select tabindex="-1">
                    <option value="" disabled="" selected="">Choose your option</option>
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                </select></div>
                <label>Materialize Select</label>
            </div>


        </form>
    </div>
    </div>



<!--JavaScript at end of body for optimized loading-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>



<div class="hiddendiv common"></div></body></html>

Answer 1

您在 1.0.0 和 0.97.3 中使用了 materialize 的多个冲突版本：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Select 只有 .css 和 .js 文件上的 1.0.0 版本才能工作。

下面是使用您提供的 HTML 代码的片段。

<html><head>
      <meta name="viewport" content="width = device-width, initial-scale = 1">
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      </script>




          <script>
    document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('select');
        var instances = M.FormSelect.init(elems);
    });
      </script>
</head>
<body class="vsc-initialized">
<nav>
    <div class="nav-wrapper">
        <a href="#" class="brand-logo right">SIW</a>
        <ul id="nav-mobile" class="left hide-on-med-and-down">
            <li><a href="/">Home</a></li>
            <li><a href="/Contact">Contact</a></li>
        </ul>
    </div>
</nav>

    <div class="section">
    <div class="row">
        <form class="col s12">


            <div class="input-field col s4">
                <div class="select-wrapper"><input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-07dbac11-476d-4358-8e69-a8d561e0df80"><ul id="select-options-07dbac11-476d-4358-8e69-a8d561e0df80" class="dropdown-content select-dropdown" tabindex="0" style=""><li class="disabled selected" id="select-options-07dbac11-476d-4358-8e69-a8d561e0df800" tabindex="0"><span>Choose your option</span></li><li id="select-options-07dbac11-476d-4358-8e69-a8d561e0df801" tabindex="0"><span>Option 1</span></li><li id="select-options-07dbac11-476d-4358-8e69-a8d561e0df802" tabindex="0"><span>Option 2</span></li><li id="select-options-07dbac11-476d-4358-8e69-a8d561e0df803" tabindex="0"><span>Option 3</span></li></ul><svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg><select tabindex="-1">
                    <option value="" disabled="" selected="">Choose your option</option>
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                </select></div>
                <label>Materialize Select</label>
            </div>


        </form>
    </div>
    </div>



<!--JavaScript at end of body for optimized loading-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>



<div class="hiddendiv common"></div></body></html>

Answer 2

您的代码有一些问题，接受的答案是：

1) 你脑子里装的是 JS。 JS 应该放在最后，在结束 body 标签之前。

2) 答案最后有 materialize.js - 在它用于您的头部函数之后。这导致了双插入符号。

3) 您正在使用 jQuery 但从未使用过它。如果你确实需要它，应该首先提供它，然后是 materialize.js，然后是你自己的自定义 JS（你运行你的 inits）。

<html>
<head>
      <meta name="viewport" content="width = device-width, initial-scale = 1">
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">



</head>
<body class="vsc-initialized">
<nav>
    <div class="nav-wrapper">
        <a href="#" class="brand-logo right">SIW</a>
        <ul id="nav-mobile" class="left hide-on-med-and-down">
            <li><a href="/">Home</a></li>
            <li><a href="/Contact">Contact</a></li>
        </ul>
    </div>
</nav>

<div class="section">
    <div class="row">
        <form class="col s12">
            <div class="input-field col s5">
                <select>
                    <option value="" disabled="" selected="">Choose your option</option>
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                </select>
                <label>Materialize Select</label>
            </div>
        </form>
    </div>
</div>



<!--JavaScript at end of body for optimized loading-->
   
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('select');
        var instances = M.FormSelect.init(elems);
    });
</script>



<div class="hiddendiv common"></div></body></html>

Materialise CSS select 下拉箭头移位

Materialize CSS select dropdown arrow displaced

css

django

materialize