Question

假设我们有一个带有输入和按钮元素的标准表单，如下例所示。我们如何使用CSS Flexbox水平和响应拉伸此表单？

<div>
   <form class="sampleform" onSubmit={this.onSubmit}>
       <input
            type="text"
            class="input-text"
            name="sampleinput"
            placeholder="A placeholder ..."
        />
        <button
             type="submit"
             class="button"
         >➕
         </button>
     </form>
</div>

Answer 1

像这样：

＆＃13;

form {
  display: flex;
}
input {
  width: 100%;
}

＆＃13;

<div>
   <form class="sampleform" onSubmit={this.onSubmit}>
       <input
            type="text"
            class="input-text"
            name="sampleinput"
            placeholder="A placeholder ..."
        />
        <button
             type="submit"
             class="button"
         >➕
         </button>
     </form>
</div>

＆＃13;

如何使用Flexbox将表单拉伸为水平div？

1 个答案: