fix: should support Input[addon] in Form[inline], close: #3524

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>
     );
   },

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
   & > &,

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;
   }