fix input relevant component box model to inline-block

examples/docs/en-US/date-picker.md

@@ -191,8 +191,7 @@ Picking a date range is supported.
     <el-date-picker
       v-model="value6"
       type="daterange"
-      placeholder="Pick a range"
-      style="width: 220px">
+      placeholder="Pick a range">
     </el-date-picker>
   </div>
   <div class="block">
@@ -202,8 +201,7 @@ Picking a date range is supported.
       type="daterange"
       align="right"
       placeholder="Pick a range"
-      :picker-options="pickerOptions2"
-      style="width: 220px">
+      :picker-options="pickerOptions2">
     </el-date-picker>
   </div>
 </template>

examples/docs/en-US/datetime-picker.md

@@ -147,8 +147,7 @@ Select date and time in one picker.
     <el-date-picker
       v-model="value3"
       type="datetimerange"
-      placeholder="Select time range"
-      style="width:350px">
+      placeholder="Select time range">
     </el-date-picker>
   </div>
   <div class="block">
@@ -158,8 +157,7 @@ Select date and time in one picker.
       type="datetimerange"
       :picker-options="pickerOptions2"
       placeholder="Select time range"
-      align="right"
-      style="width:350px">
+      align="right">
     </el-date-picker>
   </div>
 </template>

examples/docs/en-US/form.md

@@ -219,7 +219,7 @@
       padding: 0;
       list-style: none;
 
-      &:after,&:before {
+      &:after, &:before {
         content: ' ';
         display: table;
       }
@@ -263,18 +263,12 @@
     .demo-ruleForm {
       width: 480px;
 
-      .el-input,
-      .el-textarea {
-        width: auto;
-      }
-
       .el-select .el-input {
         width: 360px;
       }
     }
     .demo-dynamic {
       .el-input {
-        display: inline-block;
         margin-right: 10px;
         width: 270px;
         vertical-align: top;

examples/docs/en-US/input.md

@@ -83,68 +83,57 @@
 <style>
   .demo-input.demo-en-US {
     .el-select .el-input {
-      width: 120px;
-    }
-    .text {
-      font-size: 14px;
-      color: #8492a6;
+      width: 110px;
     }
     .el-input {
       width: 180px;
-
-      & + .el-input,
-      & + .el-textarea {
-        margin-top: 15px;
-      }
     }
     .el-textarea {
       width: 414px;
     }
     .el-input-group {
-      min-width: 260px;
-    }
-    .el-input-group + .el-input-group {
-      margin-top: 15px;
-    }
-    .el-autocomplete {
-      display: inline-block;
+      width: 100%;
     }
-    .inline-input {
-      &.el-input {
-        display: inline-block;
+    .demo-input-size {
+      .el-input {
         vertical-align: top;
-        margin: 10px 5px;
-      }
-      &.el-autocomplete {
-        display: inline-block;
-        margin: 10px 0 0;
+        margin: 0 10px 10px 0;
       }
     }
-    .tac {
+    .demo-autocomplete {
       text-align: center;
 
-      .el-autocomplete {
-        text-align: left;
+      .sub-title {
+        margin-bottom: 10px;
+        font-size: 14px;
+        color: #8492a6;
       }
-    }
-    .el-row.border-grid {
+
       .el-col:not(:last-child) {
         border-right: 1px solid rgba(224,230,237,0.50);
       }
+
+      .el-autocomplete {
+        text-align: left;
+      }
     }
     .my-autocomplete {
       li {
         line-height: normal;
         padding: 7px *;
 
-        .value {
+        .name {
           text-overflow: ellipsis;
           overflow: hidden;
         }
-        .link {
+        .addr {
           font-size: 12px;
           color: #b4b4b4;
         }
+
+        .highlighted .addr {
+          color: #ddd;
+        }
       }
     }
   }
@@ -159,10 +148,7 @@ Input data using mouse or keyboard.
 ::: demo
 
 ```html
-<el-input
-  placeholder="Please input"
-  v-model="input">
-</el-input>
+<el-input placeholder="Please input" v-model="input"></el-input>
 
 <script>
 export default {
@@ -263,26 +249,26 @@ Prepend or append an element, generally a label or a button.
 ::: demo Use `slot` to distribute elements that prepend or append to Input.
 
 ```html
-<el-input placeholder="Please input" v-model="input3">
-  <template slot="prepend">Http://</template>
-</el-input>
-<el-input placeholder="Please input" v-model="input4">
-  <template slot="append">.com</template>
-</el-input>
-<el-input placeholder="Please input" v-model="input5" style="width: 300px;">
-  <el-select v-model="select" slot="prepend" placeholder="Select">
-    <el-option label="Restaurant" value="1"></el-option>
-    <el-option label="Order No." value="2"></el-option>
-    <el-option label="Tel" value="3"></el-option>
-  </el-select>
-  <el-button slot="append" icon="search"></el-button>
-</el-input>
-
-<style>
-.el-select .el-input {
-  width: 120px;
-}
-</style>
+<div>
+  <el-input placeholder="请输入内容" v-model="input3">
+    <template slot="prepend">Http://</template>
+  </el-input>
+</div>
+<div style="margin-top: 15px;">
+  <el-input placeholder="请输入内容" v-model="input4">
+    <template slot="append">.com</template>
+  </el-input>
+</div>
+<div style="margin-top: 15px;">
+  <el-input placeholder="请输入内容" v-model="input5">
+    <el-select v-model="select" slot="prepend" placeholder="请选择">
+      <el-option label="餐厅名" value="1"></el-option>
+      <el-option label="订单号" value="2"></el-option>
+      <el-option label="用户电话" value="3"></el-option>
+    </el-select>
+    <el-button slot="append" icon="search"></el-button>
+  </el-input>
+</div>
 
 <script>
 export default {
@@ -303,28 +289,24 @@ export default {
 
 ::: demo Add `size` attribute to change the size of Input. In addition to the default size, there are three other options: `large`, `small` and `mini`.
 ```html
-<div>
+<div class="demo-input-size">
   <el-input
-    class="inline-input"
     size="large"
-    placeholder="Please input"
+    placeholder="请输入内容"
     v-model="input6">
   </el-input>
   <el-input
-    class="inline-input"
-    placeholder="Please input"
+    placeholder="请输入内容"
     v-model="input7">
   </el-input>
   <el-input
-    class="inline-input"
     size="small"
-    placeholder="Please input"
+    placeholder="请输入内容"
     v-model="input8">
   </el-input>
   <el-input
-    class="inline-input"
     size="mini"
-    placeholder="Please input"
+    placeholder="请输入内容"
     v-model="input9">
   </el-input>
 </div>
@@ -350,24 +332,24 @@ You can get some recommended tips based on the current input.
 
 ::: demo Autocomplete component provides input suggestions. The `fetch-suggestions` attribute is a method that returns suggested input. In this example, `querySearch(queryString, cb)` returns suggestions to Autocomplete via `cb(data)` when suggestions are ready.
 ```html
-<el-row class="border-grid">
-  <el-col :span="12" class="tac">
-    <div class="text">list suggestions when activated</div>
+<el-row class="demo-autocomplete">
+  <el-col :span="12">
+    <div class="sub-title">激活即列出输入建议</div>
     <el-autocomplete
       class="inline-input"
       v-model="state1"
       :fetch-suggestions="querySearch"
-      placeholder="Please input"
+      placeholder="请输入内容"
       @select="handleSelect"
     ></el-autocomplete>
   </el-col>
-  <el-col :span="12" class="tac">
-    <div class="text">list suggestions on input</div>
+  <el-col :span="12">
+    <div class="sub-title">输入后匹配输入建议</div>
     <el-autocomplete
       class="inline-input"
       v-model="state2"
       :fetch-suggestions="querySearch"
-      placeholder="Please input"
+      placeholder="请输入内容"
       :trigger-on-focus="false"
       @select="handleSelect"
     ></el-autocomplete>

examples/docs/zh-CN/date-picker.md

@@ -226,8 +226,7 @@
     <el-date-picker
       v-model="value6"
       type="daterange"
-      placeholder="选择日期范围"
-      style="width: 220px">
+      placeholder="选择日期范围">
     </el-date-picker>
   </div>
   <div class="block">
@@ -237,8 +236,7 @@
       type="daterange"
       align="right"
       placeholder="选择日期范围"
-      :picker-options="pickerOptions2"
-      style="width: 220px">
+      :picker-options="pickerOptions2">
     </el-date-picker>
   </div>
 </template>

examples/docs/zh-CN/datetime-picker.md

@@ -170,8 +170,7 @@
     <el-date-picker
       v-model="value3"
       type="datetimerange"
-      placeholder="选择时间范围"
-      style="width:350px">
+      placeholder="选择时间范围">
     </el-date-picker>
   </div>
   <div class="block">
@@ -181,8 +180,7 @@
       type="datetimerange"
       :picker-options="pickerOptions2"
       placeholder="选择时间范围"
-      align="right"
-      style="width:350px">
+      align="right">
     </el-date-picker>
   </div>
 </template>

examples/docs/zh-CN/form.md

@@ -219,7 +219,7 @@
       padding: 0;
       list-style: none;
 
-      &:after,&:before {
+      &:after, &:before {
         content: ' ';
         display: table;
       }
@@ -263,18 +263,12 @@
     .demo-ruleForm {
       width: 460px;
 
-      .el-input,
-      .el-textarea {
-        width: auto;
-      }
-
       .el-select .el-input {
         width: 360px;
       }
     }
     .demo-dynamic {
       .el-input {
-        display: inline-block;
         margin-right: 10px;
         width: 270px;
         vertical-align: top;

examples/docs/zh-CN/input.md

@@ -133,7 +133,7 @@
       width: 414px;
     }
     .el-input-group {
-      width: 260px;
+      width: 100%;
     }
     .demo-input-size {
       .el-input {
@@ -188,8 +188,7 @@
 
 ::: demo
 ```html
-<el-input v-model="input" placeholder="请输入内容">
-</el-input>
+<el-input v-model="input" placeholder="请输入内容"></el-input>
 
 <script>
 export default {
@@ -298,7 +297,7 @@ export default {
   </el-input>
 </div>
 <div style="margin-top: 15px;">
-  <el-input placeholder="请输入内容" v-model="input5" style="width: 300px;">
+  <el-input placeholder="请输入内容" v-model="input5">
     <el-select v-model="select" slot="prepend" placeholder="请选择">
       <el-option label="餐厅名" value="1"></el-option>
       <el-option label="订单号" value="2"></el-option>

examples/docs/zh-CN/select.md

@@ -128,7 +128,6 @@
 
 <style>
   .demo-select .el-select {
-    display: inline-block;
     width: 240px;
   }
 </style>

packages/date-picker/src/picker.vue

@@ -1,6 +1,7 @@
 <template>
   <el-input
     class="el-date-editor"
+    :class="'el-date-editor--' + type"
     :readonly="!editable || readonly"
     :disabled="disabled"
     :size="size"

packages/theme-default/src/date-picker/picker.css

@@ -6,6 +6,22 @@
     position: relative;
     display: inline-block;
 
+    &.el-input {
+      width: 193px;
+    }
+
+    @m daterange {
+      &.el-input {
+        width: 220px;
+      }
+    }
+
+    @m datetimerange {
+      &.el-input {
+        width: 350px;
+      }
+    }
+
     .el-picker-panel {
       position: absolute;
       min-width: 180px;

packages/theme-default/src/input.css

@@ -6,6 +6,7 @@
     position: relative;
     font-size: var(--font-size-base);
     display: inline-block;
+    width: 100%;
 
     @e inner {
       appearance: none;
@@ -105,6 +106,7 @@
   @b input-group {
     line-height: normal;
     display: inline-table;
+    width: 100%;
     border-collapse: separate;
 
     & > .el-input__inner {
@@ -170,6 +172,7 @@
 
   @b textarea {
     display: inline-block;
+    width: 100%;
 
     @e inner {
       display: block;

packages/theme-default/src/select.css

@@ -9,7 +9,7 @@
 @component-namespace el {
 
   @b select {
-    display: block;
+    display: inline-block;
     position: relative;
 
     &:hover {