解决antd表单layout=“horizontal“的布局问题

ps：本人菜鸟一枚，仅记录工作中遇到的问题，还请广大网友多多包涵，不喜勿喷，谢谢~

正文：今天用Antd Design的表单的时候，UI让我做个简单的表单，里面label和内容在一行显示，下面是UI要求做成的样子

 这是我做的样子

我发现我无论怎么捯饬，标题很内容都在两行上去显示，后来看了官网的介绍，才发现通过设置这两个属性就可以解决这个问题

下面是关键代码， 再此记录一下，看看我下次还会不会犯这么低级的错误

        <a-form
          id="formAuditRecord"
          ref="formAuditRecord"
          layout="horizontal"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 18 }"
          :form="form"
        >
          <a-form-item label="附件">
            <a-button type="primary" ghost> 上传附件 </a-button>
          </a-form-item>
          <a-form-item label="原因描述">
            <a-textarea
              placeholder="请输入差异原因"
              v-decorator="['opinion', { rules: [{ required: false, message: '请输入原因描                        述' }] }]"
              :rows="4"
            />
          </a-form-item>
        </a-form>