时间戳

首页 > 解决方案 > 如何使用 css flexbox 在文本输入中创建一个按钮？

javascript - 如何使用 css flexbox 在文本输入中创建一个按钮？

问题描述

我正在尝试使用按钮创建一个简单的输入文本。但我想要输入框中的按钮。我正在使用 CSS 弹性框。

下面是代码

<style>
    .container{
        display: flex;
        width: 500px;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }
    input{
        height: 60px;
        width: 320px;
        background-color: #fce6ef;
        border-radius: 50px;
        border: 1px solid #ffc5dd;
    }
    button{
        height: 54px;
        width: 94px;
        background-color: #ff0266;
        color: #ffffff;
        text-transform: uppercase;
        border-style: none;
        border-radius: 50px;
    }
    </style>
    
    <body>
        <div class="container">
            <input type="text">
            <button>Submit</button>
        </div>
    </body>

附上图片以便更好地理解：

在此处输入图像描述

标签： javascripthtmlcss

解决方案

考虑以下（无position）：

.container {
  display: flex;
  width: 500px;
  padding: 4px;
  padding-left: 20px;
  justify-content: center;
  align-items: center;
  margin: auto;
  background-color: #fce6ef;
  border-radius: 50px;
  border: 1px solid #ffc5dd;
}

input {
  width: 100%;
  height: 54px;
  background: none;
  border: 0;
  padding: 0;
  outline: none;
}

button {
  height: 54px;
  width: 94px;
  background-color: #ff0266;
  color: #ffffff;
  text-transform: uppercase;
  border-style: none;
  border-radius: 50px;
  cursor: pointer;
  outline: none;
}
<div class="container">
  <input type="text">
  <button>Submit</button>
</div>

推荐阅读