fix: Input with suffix align issue (#22603)

* fix: Input prefix style

* update snapshot

* fix int

components/input/__tests__/__snapshots__/demo.test.js.snap

@@ -890,6 +890,42 @@ exports[`renders ./components/input/demo/align.md correctly 1`] = `
       </span>
     </span>
   </span>
+  <span
+    class="ant-input-affix-wrapper"
+    style="width:50px"
+  >
+    <input
+      class="ant-input"
+      type="text"
+      value=""
+    />
+    <span
+      class="ant-input-suffix"
+    >
+      Y
+    </span>
+  </span>
+  <input
+    class="ant-input"
+    style="width:50px"
+    type="text"
+    value=""
+  />
+  <span
+    class="ant-input-affix-wrapper"
+    style="width:50px"
+  >
+    <input
+      class="ant-input"
+      type="text"
+      value="1"
+    />
+    <span
+      class="ant-input-suffix"
+    >
+      Y
+    </span>
+  </span>
 </div>
 `;
 

components/input/demo/align.md

@@ -28,6 +28,10 @@ const RadioGroup = Radio.Group;
 const Option = Select.Option;
 const { MonthPicker, RangePicker } = DatePicker;
 
+const narrowStyle = {
+  width: 50,
+};
+
 const options = [
   {
     value: 'zhejiang',
@@ -94,6 +98,9 @@ ReactDOM.render(
     <AutoComplete style={{ width: 100 }} placeholder="input here" />
     <br />
     <Input prefix="$" addonBefore="Http://" addonAfter=".com" defaultValue="mysite" />
+    <Input style={narrowStyle} suffix="Y" />
+    <Input style={narrowStyle} />
+    <Input style={narrowStyle} defaultValue="1" suffix="Y" />
   </div>,
   mountNode,
 );

components/input/style/affix.less

@@ -17,6 +17,12 @@
         box-shadow: none;
       }
     }
+
+    &::before {
+      width: 0;
+      visibility: hidden;
+      content: '\a0';
+    }
   }
 
   &-prefix,