MDC-Web 选择组件答案

【问题标题】：MDC-Web Select ComponentMDC-Web 选择组件
【发布时间】：2019-01-19 10:35:38
【问题描述】：

我正在尝试使用 unpkg 将 MDC Web Components 添加到我的网站，在实施时遇到了一个问题，我并排使用了两个选择元素。问题是在从第一个选择元素该元素略微向下移动，而从第二个选择元素中选择选项时，第一个元素被移动到之前的位置。我无法理解为什么会发生这种情况。在我的 HTML 中，我只包含了 css 和 js 文件材料网络组件。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
    <style type="text/css">
        .select-position {
            min-width: 175px;
            left: 25%;
            margin:5px;
        }
    </style>
</head>
<body>
    <div class="mdc-select select-position mdc-select--outlined" data-mdc-auto-init="MDCSelect">
        <select class="mdc-select__native-control">
            <option></option>
            <option>First Year</option>
            <option>Second Year</option>
        </select>
        <label class="mdc-floating-label">Select Year</label>
        <div class="mdc-notched-outline">
            <svg>
                <path class="mdc-notched-outline__path"></path>
            </svg>
        </div>
        <div class="mdc-notched-outline__idle"></div>
    </div>
    <div class="mdc-select select-position mdc-select--outlined" data-mdc-auto-init="MDCSelect">
        <select class="mdc-select__native-control">
            <option></option>
            <option>CSE</option>
            <option>ECE</option>
        </select>
        <label class="mdc-floating-label">Select Branch</label>
        <div class="mdc-notched-outline">
            <svg>
                <path class="mdc-notched-outline__path"></path>
            </svg>
        </div>
        <div class="mdc-notched-outline__idle"></div>
    </div>
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    <script>mdc.autoInit()</script>
</body>
</html>

【问题讨论】：

标签： html material-design material-components material-components-web mdc-components

【解决方案1】：

我在这里与团队中的另一个人进行了一些调查。附件是修复它的代码笔。

我认为这个问题只发生在 Chrome 上。检查 Firefox - 我没有遇到这种情况
选择时，选择的高度正在改变/没有值（在Chrome中）。
为了克服这个问题，我们用一个 div 包裹每个选择，并让两个元素的父元素显示：flex。

https://codepen.io/moog16/pen/GBeLxE.

<div style="display: flex">
  <div>
   <SelectElement ... >
  </div>
  <div>
   <SelectElement ... >
  </div>
</div>

【讨论】：

非常感谢它的工作原理。我找到了另一种方法，但我不知道这是否是正确的做法，将 float:left; 添加到 select-position 类正在修复它。我想知道为什么会发生这种情况我的意思是 mdc-web 选择组件内部的问题是什么
还有如何在页面中心对齐选择标签？
垂直居中？还是水平的？如果你使用 display flex，它就像使用 justify-content 或 align-items 一样简单。
我不会使用 float: left。在大多数情况下，float 应该作为最后的手段，因为它将元素从文档流中取出。
man 在上面的示例中，您将 display:flex 添加到 div 元素中，在代码笔示例中，您将其添加到 body 元素中更好？还有一个问题，如果将 display:flex 添加到 div 元素，我还将 ** justify-content:center** 属性添加到 div 元素，然后选择框水平对齐，但是当我将 align-items:center 属性添加到它们没有垂直对齐的 div 元素中，我是否必须添加 height 属性，如果是，那么它应该是多少像素？