From 1ed434a69543723f8a6aefa77381c0757af324b4 Mon Sep 17 00:00:00 2001
From: Benjy Cui <benjytrys@gmail.com>
Date: Fri, 21 Oct 2016 15:04:55 +0800
Subject: [PATCH] fix: should support Input[addon] in Form[inline], close:
 #3524

---
 components/form/demo/inline-form.md | 16 ++++++----------
 components/form/style/index.less    |  1 +
 components/input/style/mixin.less   |  2 +-
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/components/form/demo/inline-form.md b/components/form/demo/inline-form.md
index 1ecd466d7e..b46b470c47 100644
--- a/components/form/demo/inline-form.md
+++ b/components/form/demo/inline-form.md
@@ -14,7 +14,7 @@ title:
 Inline form is often used for login.
 
 ````jsx
-import { Form, Input, Button, Checkbox } from 'antd';
+import { Form, Icon, Input, Button, Checkbox } from 'antd';
 const FormItem = Form.Item;
 
 let Demo = React.createClass({
@@ -27,26 +27,22 @@ let Demo = React.createClass({
     const { getFieldDecorator } = this.props.form;
     return (
       <Form inline onSubmit={this.handleSubmit}>
-        <FormItem
-          label="Account"
-        >
+        <FormItem>
           {getFieldDecorator('userName')(
-            <Input placeholder="Please input the account" />
+            <Input addonBefore={<Icon type="user" />} placeholder="Please input the account" />
           )}
         </FormItem>
-        <FormItem
-          label="Password"
-        >
+        <FormItem>
           {getFieldDecorator('password')(
-            <Input type="password" placeholder="Please input the password" />
+            <Input addonBefore={<Icon type="lock" />} type="password" placeholder="Please input the password" />
           )}
         </FormItem>
         <FormItem>
           {getFieldDecorator('agreement')(
             <Checkbox>Remember me</Checkbox>
           )}
+          <Button type="primary" htmlType="submit">Submit</Button>
         </FormItem>
-        <Button type="primary" htmlType="submit">Submit</Button>
       </Form>
     );
   },
diff --git a/components/form/style/index.less b/components/form/style/index.less
index 7118111996..ddd97911bf 100644
--- a/components/form/style/index.less
+++ b/components/form/style/index.less
@@ -62,6 +62,7 @@ input[type="checkbox"] {
   font-size: @font-size-base;
   margin-bottom: @form-item-margin-bottom;
   color: #666;
+  vertical-align: top;
 
   // nested FormItem
   & > &,
diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less
index 96eb3e5b77..f46b79dcdc 100644
--- a/components/input/style/mixin.less
+++ b/components/input/style/mixin.less
@@ -130,7 +130,7 @@
 
   &-addon,
   &-wrap {
-    width: 1%;
+    width: 1px; // To make addon/wrap as small as possible
     white-space: nowrap;
     vertical-align: middle;
   }