diff --git a/examples/docs/en-US/date-picker.md b/examples/docs/en-US/date-picker.md
index 597d21cc2..99581b74b 100644
--- a/examples/docs/en-US/date-picker.md
+++ b/examples/docs/en-US/date-picker.md
@@ -1,3 +1,10 @@
+<style>
+  .demo-date-picker .el-input {
+    width: 180px;
+    margin: auto;
+  }
+</style>
+
 <script>
   module.exports = {
     data() {
diff --git a/examples/docs/en-US/datetime-picker.md b/examples/docs/en-US/datetime-picker.md
index dbd481c48..eedf380e9 100644
--- a/examples/docs/en-US/datetime-picker.md
+++ b/examples/docs/en-US/datetime-picker.md
@@ -1,3 +1,10 @@
+<style>
+  .demo-datetime-picker .el-input {
+    width: 180px;
+    margin: auto;
+  }
+</style>
+
 <script>
   module.exports = {
     data() {
diff --git a/examples/docs/en-US/time-picker.md b/examples/docs/en-US/time-picker.md
index f934ce69b..241427c59 100644
--- a/examples/docs/en-US/time-picker.md
+++ b/examples/docs/en-US/time-picker.md
@@ -1,3 +1,10 @@
+<style>
+  .demo-time-picker .el-input {
+    width: 180px;
+    display: inline-block;
+  }
+</style>
+
 ## TimePicker
 
 Use Time Picker for time input.
diff --git a/examples/docs/zh-CN/date-picker.md b/examples/docs/zh-CN/date-picker.md
index d6c49cd5f..2a02cbf63 100644
--- a/examples/docs/zh-CN/date-picker.md
+++ b/examples/docs/zh-CN/date-picker.md
@@ -1,3 +1,10 @@
+<style>
+  .demo-date-picker .el-input {
+    width: 180px;
+    margin: auto;
+  }
+</style>
+
 <script>
   module.exports = {
     data() {
diff --git a/examples/docs/zh-CN/datetime-picker.md b/examples/docs/zh-CN/datetime-picker.md
index 52adf6457..a9c7a262f 100644
--- a/examples/docs/zh-CN/datetime-picker.md
+++ b/examples/docs/zh-CN/datetime-picker.md
@@ -1,3 +1,10 @@
+<style>
+  .demo-datetime-picker .el-input {
+    width: 180px;
+    margin: auto;
+  }
+</style>
+
 <script>
   module.exports = {
     data() {
diff --git a/examples/docs/zh-CN/time-picker.md b/examples/docs/zh-CN/time-picker.md
index 58f4ebd1f..8eebeb3a1 100644
--- a/examples/docs/zh-CN/time-picker.md
+++ b/examples/docs/zh-CN/time-picker.md
@@ -1,4 +1,8 @@
 <style>
+  .demo-time-picker .el-input {
+    width: 180px;
+    display: inline-block;
+  }
   .demo-box {
     .el-date-editor + .el-date-editor {
       margin-left: 10px;
diff --git a/packages/theme-default/src/date-picker/picker.css b/packages/theme-default/src/date-picker/picker.css
index 7fc4832bd..195813695 100644
--- a/packages/theme-default/src/date-picker/picker.css
+++ b/packages/theme-default/src/date-picker/picker.css
@@ -3,9 +3,6 @@
 
 @component-namespace el {
   @b date-editor {
-    position: relative;
-    display: inline-block;
-
     .el-picker-panel {
       position: absolute;
       min-width: 180px;