中的label="serv_id" 和 不能对齐

Question

自学前端开发的小白提问求助

1.问题描述

<Form.Item> 中的label="serv_id" 和 <Input> 不能对齐，应该怎么调整？

2.相关环境

[root@localhost my-app]# cat package.json 
{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^4.6.2",
    "@testing-library/jest-dom": "^5.11.10",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "antd": "^4.15.5",
    "babel-core": "^6.26.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

代码文件

主要的两个代码文件如下：

import React, {Component} from 'react';
import 'antd/dist/antd.css';

import {
  Form,
  Input,
  Button,
  message,
  Divider,
  Table
} from 'antd';

const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };
  
const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
  };

const MyTable = (props) => {
    ...
}


export default class myOpMDB extends Component{

    state = {isSucess : false, res : ""};

    onFinish = (values) => {
      var param = {};
      param["serv_id"] =  values.serv_id;
      param["main_cmd"] =  1000;
      param["sub_cmd"] = 2;
      param["case_id"] = 0;
      param["mdb_type"] =  values.mdb_type;
      param["time_point"] =  this.state.time_point;
      const obj = JSON.stringify(param); // avaScript 对象或值转换为 JSON 字符串
      console.log("will send param = " + obj);

      let url = 'http://' + window.url + '/json';
      console.log("url="+url);
      // Submitting Form Data, Pulling in API Data.
      //fetch('./data.json')  // 相对index.html目录
      fetch(url, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: obj,
            mode: "cors"
      })
      .then((response) => {
        console.log("response.status=" + response.status);
        return response.json()
      })
      .then((data) => {
        // Work with JSON data here
        //var strRet = JSON.stringify(data);
        //console.log("get response json data=" + strRet);
        console.log("get response json data");
        this.setState({isSucess : true});
        this.setState({res : data});
        if(!this.state.isSucess)
        {
            alert("please check rating-http-server!");
        }
      })
      .catch((err) => {
        console.log(err);
        // Do something for an error here
        if(!this.state.isSucess)
        {
            alert("please check rating-http-server!");
        }
      });
    };

    onDownload = () => {
        if(!this.state.isSucess)
        {
            message.info("search first!");
            return;
        }
        var elementA = document.createElement('a');
        const json = this.state.res;
        const str = JSON.stringify(json);
        console.log("download =>", str);
        elementA.setAttribute('href', 'data:text/plain;charset=utf-8,' + str);
        var dt = new Date();
        var prefix = "mdb_" + dt.getFullYear() + (dt.getMonth()+1) + dt.getDate() + dt.getHours() + dt.getMinutes() + dt.getSeconds();
        elementA.setAttribute('download', prefix + ".json");
        elementA.style.display = 'none';
        document.body.appendChild(elementA);
        elementA.click();
        document.body.removeChild(elementA);
    };

    onReset = () =>{
        this.setState({isSucess : false});
        this.setState({res : {}});
    }

  render(){
    const content = this.state.res;
    return (
        <div>
            <Form {...layout} name="control" layout="horizontal" onFinish={this.onFinish}>
                <Form.Item name="serv_id" label="serv_id" rules={[{required: true}]}>
                    <Input placeholder="请输入"/>
                </Form.Item>
                <Form.Item {...tailLayout}>
                    <Button type="primary" htmlType="submit">Search</Button>
                    <Button type="primary" htmlType="reset" onClick={this.onReset}>Reset</Button>
                    <Button type="primary" onClick={this.onDownload}>Download</Button>
                </Form.Item>
                <Divider orientation="left" />
            </Form>
            <MyTable characterData={content}/>
        </div>);
    }
};


//-------------------------------------------------------------
import { Component } from 'react';
import React from 'react';
import {BrowserRouter as Router, Link, Route} from 'react-router-dom'
import 'antd/dist/antd.css';
import { Layout, Menu } from 'antd';

import {CloudServerOutlined, DatabaseOutlined, CloudUploadOutlined, SettingOutlined, FormOutlined, AppstoreOutlined, FileOutlined} from '@ant-design/icons';

import myFile     from './File.js'
import myOpMDB    from './OpMDB.js'
import myOpDB     from './OpDB.js'
import mySetting  from './Setting.js'
import myHelp     from './Help.js'
import myAdvice   from './Advice.js'

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

export default class SiderDemo extends Component{
 render(){
  return (
  <Router>
  <Layout>
    <Sider
      style={{
        overflow: 'auto',
        height: '100vh',
        position: 'fixed',
        left: 0,
      }}>
      <div className="logo">
      <img src='./logo.png' width="50" id="logo" alt="react" />
      <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
          <SubMenu key="sub1" icon={<AppstoreOutlined />} title="查询">
            <Menu.Item key="1" icon={<CloudServerOutlined />}><Link to="/OpMDB">MDB</Link></Menu.Item>
            <Menu.Item key="2" icon={<DatabaseOutlined />}><Link to="/OpDB">Oracle</Link></Menu.Item>
          </SubMenu>
        <Menu.Item key="3" icon={<CloudUploadOutlined />}><Link to="/File">上传</Link></Menu.Item>
        <Menu.Item key="4" icon={<SettingOutlined />}><Link to="/Setting">设置</Link></Menu.Item>
        <Menu.Item key="5" icon={<FileOutlined />}><Link to="/Help">帮助</Link></Menu.Item>
        <Menu.Item key="6" icon={<FormOutlined />}><Link to="/Advice">建议</Link></Menu.Item>
        </Menu>
      </div>
    </Sider>
    <Layout className="site-layout" style={{ marginLeft: 200 }}>
      <Header className="site-layout-background" style={{ padding: 0 }} />
      <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
        <div className="site-layout-background" style={{ padding: 24, textAlign: 'center' }}>
            <Route exact path="/" component={ mySetting } />
            <Route exact path="/OpMDB" component={ myOpMDB } />
            <Route exact path="/OpDB" component={ myOpDB } />
            <Route exact path="/File" component={ myFile } />
            <Route exact path="/Setting" component={ mySetting } />
            <Route exact path="/Help" component={ myHelp } />
            <Route exact path="/Advice" component={ myAdvice } />
        </div>
      </Content>
      <Footer style={{ textAlign: 'center' }}> Created by test</Footer>
    </Layout>
  </Layout>
  </Router>);
};
}