Javascript 如何使用css flexbox在文本输入中创建按钮？_Javascript_Html_Css

Javascript 如何使用css flexbox在文本输入中创建按钮？

javascript html css

Javascript 如何使用css flexbox在文本输入中创建按钮？,javascript,html,css,Javascript,Html,Css,我试图用一个按钮创建一个简单的输入文本。但我想在输入框里面有一个按钮。我正在使用CSS flexbox 下面是代码 .集装箱{ 显示器：flex；宽度：500px；证明内容：中心；对齐项目：居中；保证金：0自动； } 输入{ 高度：60px；宽度：320px；背景色：#fce6ef；边界半径：50px；边框：1px实心#ffc5dd； } 钮扣{ 高度：54px；宽度：94px；背景色：#ff0266；颜色：#ffffff；文本转换：大写；边框样式：无；边界半径

我试图用一个按钮创建一个简单的输入文本。但我想在输入框里面有一个按钮。我正在使用CSS flexbox

下面是代码


.集装箱{
显示器：flex；
宽度：500px；
证明内容：中心；
对齐项目：居中；
保证金：0自动；
}
输入{
高度：60px；
宽度：320px；
背景色：#fce6ef；
边界半径：50px；
边框：1px实心#ffc5dd；
}
钮扣{
高度：54px；
宽度：94px；
背景色：#ff0266；
颜色：#ffffff；
文本转换：大写；
边框样式：无；
边界半径：50px；
}
提交

您需要使用相对定位将按钮向左移动：

.container{
显示器：flex；
宽度：500px；
证明内容：中心；
对齐项目：居中；
保证金：0自动；
}
输入{
左侧填充：20px；
右侧填充：110px；
高度：60px；
宽度：320px；
背景色：#fce6ef；
边界半径：50px；
边框：1px实心#ffc5dd；
}
钮扣{
位置：相对位置；
左：-100px；
高度：54px；
宽度：94px；
背景色：#ff0266；
颜色：#ffffff；
文本转换：大写；
边框样式：无；
边界半径：50px；
}


提交

试试这个伙伴。希望这是你需要的。我所做的只是使输入透明，外部div保存输入的样式

编辑。去掉了当你点击元素时自然出现的可怕的输入轮廓

.container{
    display: flex;
    justify-content: space-between;
    width: 500px;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    background-color: #fce6ef;
    border-radius: 50px;
    border: 1px solid #ffc5dd;
}
input{
    height: 58px;
    width: 100%;
    background-color:#fce6ef;
    border-radius: 50px;
    border: none;
}
button{
    height: 54px;
    width: 150px;
    background-color: #ff0266;
    color: #ffffff;
    text-transform: uppercase;
    border-style: none;
    border-radius: 50px;
}
input:focus {
  outline: none;
}

此处工作代码-

使用

位置：绝对

.container{
显示器：flex；
宽度：500px；
证明内容：中心；
对齐项目：居中；
保证金：0自动；
位置：相对；/*已添加*/
}
输入{
高度：60px；
宽度：100%；/*已更改*/
背景色：#fce6ef；
边界半径：50px；
边框：1px实心#ffc5dd；
右填充：100px；/*已添加*/
}
钮扣{
高度：54px；
宽度：94px；
背景色：#ff0266；
颜色：#ffffff；
文本转换：大写；
边框样式：无；
边界半径：50px；
位置：绝对；/*已添加*/
右：5px；/*已添加*/
}

提交
因为.container
已经是一个显示设置为flex的元素。您可以将所有It子项对齐在同一行上，并将输入字段设置为增长，并占用容器内的所有空间
之后，您可以将背景色应用于容器，而不是将其应用于输入字段

.container{
显示器：flex；
宽度：500px；
证明内容：中心；
对齐项目：居中；
保证金：0自动；
背景色：#fce6ef；
边界半径：50px；
边框：1px实心#ffc5dd；
高度：60px；
填充：0px 3px 0px 8px；
}
输入{
填充：4px；
柔性生长：1；
背景色：透明；
大纲：无；
边界：无；
右边距：8px；
}
钮扣{
高度：54px；
宽度：94px；
背景色：#ff0266；
颜色：#ffffff；
文本转换：大写；
边框样式：无；
边界半径：50px；
}

提交
您可以通过设计.container
而不是输入来轻松实现这一点。然后使输入透明，就是这样：

.container{
显示器：flex；
宽度：300px；
证明内容：中心；
对齐项目：居中；
填充：2px；
背景色：#fce6ef；
边界半径：50px；
边框：1px实心#ffc5dd；
}
输入{
高度：54px；
字体大小：20px；
宽度：100%；
背景色：透明；
边界半径：50px 0 50px；
边界：无；
大纲：无；
}
钮扣{
高度：54px；
宽度：94px；
背景色：#ff0266；
颜色：#ffffff；
文本转换：大写；
边框样式：无；
边界半径：50px；
}

提交
从技术上讲，您不能将其放在输入中，但您可以使用按钮上的“位置：绝对”和容器上的“相对位置”绝对定位输入中的位置。然后将其放置在顶部、左侧、右侧等位置
<style>
.container{
display: flex;
width: 500px;
justify-content: center;
align-items: center;
margin: 0 auto;
position: relative;
}
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;
position: absolute;
}
</style>

<body>
    <div class="container">
      <input type="text" /> <!-- close the input tag -->
      <button>Submit</button>
   </div>
</body>


.集装箱{
显示器：flex；
宽度：500px；
证明内容：中心；
对齐项目：居中；
保证金：0自动；
位置：相对位置；
}
输入{
高度：60px；
宽度：320px；
背景色：#fce6ef；
边界半径：50px；
边框：1px实心#ffc5dd；
}
钮扣{
高度：54px；
宽度：94px；
背景色：#ff0266；
颜色：#ffffff；
文本转换：大写；
边框样式：无；
边界半径：50px；
位置：绝对位置；
}
提交

考虑以下因素（无位置
ing）：

.container{
显示器：flex；
宽度：500px；
填充：4px；
左侧填充：20px；
证明内容：中心；
对齐项目：居中；
保证金：自动；
背景色：#fce6ef；
边界半径：50px；
边框：1px实心#ffc5dd；
}
输入{
宽度：100%；
高度：54px；
背景：无；
边界：0；
填充：0；
大纲：无；
}
钮扣{
高度：54px；
宽度：94px；
背景色：#ff0266；
颜色：#ffffff；
文本转换：大写；
边框样式：无；
边界半径：50px；
光标：指针；
大纲：无；
}

提交
对于那些喜欢使用引导而不是使用flex容器进行布局的人，类输入组append
可能是一个不错的选择：

@import”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css";

按钮
您好，如果您想提高响应速度。比-100px更烦人。我认为最好将position:relative放在.container和按钮上，position:absolute，right:0和一点margin right。@ATD addpadding right 110px