diff --git a/components/mention/demo/async.md b/components/mention/demo/async.md
index 2c70a2da29..666fb8c441 100644
--- a/components/mention/demo/async.md
+++ b/components/mention/demo/async.md
@@ -40,11 +40,14 @@ const AsyncMention = React.createClass({
   },
   render() {
     const { suggestions, loading } = this.state;
-    return (<Mention
-      loading={loading}
-      suggestions={suggestions}
-      onSearchChange={this.onSearchChange}
-    />);
+    return (
+      <Mention
+        style={{ width: 500, height: 100 }}
+        loading={loading}
+        suggestions={suggestions}
+        onSearchChange={this.onSearchChange}
+      />
+    );
   },
 });
 
diff --git a/components/mention/demo/avatar.md b/components/mention/demo/avatar.md
index e41a2c2d01..d47adacf26 100644
--- a/components/mention/demo/avatar.md
+++ b/components/mention/demo/avatar.md
@@ -50,11 +50,14 @@ const CustomNavMention = React.createClass({
   },
   render() {
     const { suggestions, loading } = this.state;
-    return (<Mention
-      loading={loading}
-      suggestions={suggestions}
-      onSearchChange={this.onSearchChange}
-    />);
+    return (
+      <Mention
+        style={{ width: 500, height: 100 }}
+        loading={loading}
+        suggestions={suggestions}
+        onSearchChange={this.onSearchChange}
+      />
+    );
   },
 });
 
diff --git a/components/mention/demo/basic.md b/components/mention/demo/basic.md
index 6160c9b047..4af3193f58 100644
--- a/components/mention/demo/basic.md
+++ b/components/mention/demo/basic.md
@@ -21,10 +21,10 @@ function onChange(editorState) {
 
 ReactDOM.render(
   <Mention
+    style={{ width: 500, height: 100 }}
     onChange={onChange}
     defaultValue={toEditorState('@afc163')}
     suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
-  />,
-  mountNode
-);
+  />
+, mountNode);
 ````
diff --git a/components/mention/demo/controlled.md b/components/mention/demo/controlled.md
index 719ad47950..ce89842fb8 100644
--- a/components/mention/demo/controlled.md
+++ b/components/mention/demo/controlled.md
@@ -55,31 +55,30 @@ let App = React.createClass({
       initialValue: this.state.initValue,
     });
     console.log('>> render', getFieldValue('mention') === this.state.initValue);
-    return (<Form horizontal form={this.props.form}>
-      <FormItem
-        id="control-mention"
-        label="最帅的码农"
-        labelCol={{ span: 6 }}
-        wrapperCol={{ span: 14 }}
-      >
-        <Mention
-          {...mentionProps}
-          suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
-        />
-      </FormItem> 
-      <FormItem wrapperCol={{ span: 12, offset: 7 }}>
-        <Button type="primary" onClick={this.handleSubmit}>确定</Button>
-        &nbsp;&nbsp;&nbsp;
-        <Button type="ghost" onClick={this.handleReset}>重置</Button>
-      </FormItem>
-    </Form>);
+    return (
+      <Form horizontal form={this.props.form}>
+        <FormItem
+          id="control-mention"
+          label="最帅的码农"
+          labelCol={{ span: 6 }}
+          wrapperCol={{ span: 14 }}
+        >
+          <Mention
+            {...mentionProps}
+            suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
+          />
+        </FormItem> 
+        <FormItem wrapperCol={{ span: 14, offset: 6 }}>
+          <Button type="primary" onClick={this.handleSubmit}>确定</Button>
+          &nbsp;&nbsp;&nbsp;
+          <Button type="ghost" onClick={this.handleReset}>重置</Button>
+        </FormItem>
+      </Form>
+    );
   },
 });
 
-
 App = Form.create()(App);
-ReactDOM.render(
-  <App />,
-  mountNode
-);
+
+ReactDOM.render(<App />, mountNode);
 ````
diff --git a/components/mention/demo/custom-tag.md b/components/mention/demo/custom-tag.md
index e41a4ed5d4..83ec1e6b41 100644
--- a/components/mention/demo/custom-tag.md
+++ b/components/mention/demo/custom-tag.md
@@ -37,22 +37,22 @@ const CustomNavMention = React.createClass({
     const filtered = webFrameworks.filter(item =>
       item.name.toLowerCase().indexOf(searchValue) !== -1
     );
-
     const suggestions = filtered.map(suggestion =>
       <Nav value={suggestion.name} >
         <span>{suggestion.name} - {suggestion.type} </span>
       </Nav>);
-    this.setState({
-      suggestions,
-    });
+    this.setState({ suggestions });
   },
   render() {
     const { suggestions, loading } = this.state;
-    return (<Mention
-      loading={loading}
-      suggestions={suggestions}
-      onSearchChange={this.onSearchChange}
-    />);
+    return (
+      <Mention
+        style={{ width: 500, height: 100 }}
+        loading={loading}
+        suggestions={suggestions}
+        onSearchChange={this.onSearchChange}
+      />
+    );
   },
 });
 
diff --git a/components/mention/demo/multilines.md b/components/mention/demo/multilines.md
index 0d075fb161..77cb0e46d2 100644
--- a/components/mention/demo/multilines.md
+++ b/components/mention/demo/multilines.md
@@ -21,11 +21,10 @@ function onChange(editorState) {
 
 ReactDOM.render(
   <Mention
-    style={{ width: '100%', height: 200 }}
+    style={{ width: 500, height: 100 }}
     onChange={onChange}
     suggestions={['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai']}
     multiLines
-  />,
-  mountNode
-);
+  />
+, mountNode);
 ````
diff --git a/components/mention/style/index.less b/components/mention/style/index.less
index bfc86ab5a2..b81ac809c5 100644
--- a/components/mention/style/index.less
+++ b/components/mention/style/index.less
@@ -6,12 +6,14 @@
   position: relative;
   display: inline-block;
   width: 100%;
+  vertical-align: middle;
   &.active .ant-mention-editor {
     .active;
   }
   .ant-mention-editor {
    .input;
    padding: 0;
+   display: block;
   }
   .ant-mention-editor-wrapper {
     overflow-y: auto;
@@ -95,4 +97,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}