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

hsvhsicv 于 2023-05-15 发布在其他

关注(0)|答案(1)|浏览(203)

假设我们有一个包含input和button元素的标准表单，如下面的示例所示。我们如何通过使用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>

Html

来源：https://stackoverflow.com/questions/50134847/how-to-stretch-a-form-into-a-horizontal-div-by-using-flexbox

1条答案

按热度按时间

amrnrhlw1#

就像这样：

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

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

赞(0）回复(0）举报 2023-05-15

我来回答

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

1条答案

相关问题

热门标签

最新问答