fix(select): vertical align

demo/debugComponents/verticalAlignDebug.vue

@@ -0,0 +1,50 @@
+<template>
+  <div style="padding: 100px;">
+    <div style="width: 100%; line-height: 60px; text-decoration: underline overline;">
+      123456ggg
+      <n-select
+        multiple
+        :options="options"
+        style="width: 200px;"
+      />
+      <n-select
+        :options="options"
+        style="width: 200px;"
+      />
+      <n-input style="width: 200px; display: inline-block;" />
+    </div>
+    <n-input />
+    <n-select :options="options" />
+    <n-select
+      multiple
+      :options="options"
+      style="width: 200px;"
+    />
+    <div style="width: 100%; line-height: 60px; text-decoration: underline overline;">
+      123456ggg
+      <input
+        style="height: 60px;display: inline-block; vertical-align: baseline;"
+        value="666"
+      >
+
+      <div
+        style="height: 60px; background: red; display: inline-block; vertical-align: baseline;"
+      >
+        666
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      options: [{
+        label: 'test',
+        value: 'test'
+      }]
+    }
+  }
+}
+</script>

demo/demo.vue

@@ -270,8 +270,12 @@ export default {
               path: '/n-back-top-debug'
             },
             {
-              name: 'Cascader',
+              name: 'CascaderDebug',
               path: '/n-cascader-debug'
+            },
+            {
+              name: 'VerticalAlignDebug',
+              path: '/n-vertical-align-debug'
             }
           ]
         }

packages/common/Select/src/BaseSelect.vue

@@ -2,6 +2,9 @@
   <div
     ref="select"
     class="n-select"
+    :class="{
+      [`n-select--${size}-size`]: size
+    }"
     @keydown.up.prevent="() => {}"
     @keydown.down.prevent="() => {}"
     @keydown.space="handleKeyDownSpace"

packages/common/Select/src/main.vue

@@ -40,7 +40,7 @@ export default {
     },
     size: {
       type: String,
-      default: 'default'
+      default: 'medium'
     },
     emitOption: {
       type: Boolean,

styles/BasePicker.scss

@@ -7,6 +7,8 @@
   border-radius: $select-border-radius;
   width: 100%;
   max-width: 100%;
+  display: inline-block;
+  vertical-align: bottom;
   .n-base-picker__mark {
     position: absolute;
     top: 50%;
@@ -31,6 +33,9 @@
     background-color: $select-background-color;
   }
   .n-base-picker-label {
+    display: inline-block;
+    width: 100%;
+    vertical-align: bottom;
     .n-base-picker-label__input {
       outline: none;
       box-sizing: border-box;
@@ -56,6 +61,9 @@
     display: flex;
     flex-wrap: wrap;
     align-items: center;
+    display: inline-block;
+    width: 100%;
+    vertical-align: bottom;
     .n-base-picker-tag {
       vertical-align: bottom;
       box-sizing: border-box;

styles/Input.scss

@@ -4,6 +4,8 @@
 @include b(input) {
   position: relative;
   width: 100%;
+  display: inline-block;
+  vertical-align: baseline;
   .n-input__icon {
     position: absolute;
     line-height: 18px;
@@ -63,6 +65,7 @@
   &.n-input--small-size {
     &:not(.n-input--textarea) {
       height: $small-height;
+      line-height: $small-height;
     }
     .n-input__textarea {
       font-size: $small-input-font-size;
@@ -77,6 +80,7 @@
   &.n-input--default-size, &.n-input--medium-size {
     &:not(.n-input--textarea) {
       height: $default-height;
+      line-height: $default-height;
     }
     .n-input__textarea {
       font-size: $default-input-font-size;
@@ -91,6 +95,7 @@
   &.n-input--large-size {
     &:not(.n-input--textarea) {
       height: $large-height;
+      line-height: $large-height;
     }
     .n-input__textarea {
       font-size: $large-input-font-size;