我正在尝试使用按钮创建一个简单的输入文本。但我想要输入框内的按钮。我正在使用 CSS flexbox。下面是代码<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>附上图片以便更好地理解：
5 回答
潇潇雨雨
TA贡献1833条经验 获得超4个赞
因为它.container已经是一个显示设置为 flex 的元素。您可以将所有 It 子项对齐在同一行上，并将输入字段设置为增长并占用容器内的所有空间。
之后，您可以将背景颜色应用于容器而不是将其应用于输入字段。
.container{
display: flex;
width: 500px;
justify-content: center;
align-items: center;
margin: 0 auto;
background-color: #fce6ef;
border-radius: 50px;
border: 1px solid #ffc5dd;
height: 60px;
padding: 0px 3px 0px 8px;
}
input{
padding: 4px;
flex-grow: 1;
background-color: transparent;
outline: none;
border: none;
margin-right: 8px;
}
button{
height: 54px;
width: 94px;
background-color: #ff0266;
color: #ffffff;
text-transform: uppercase;
border-style: none;
border-radius: 50px;
}
<div class="container">
<input type="text">
<button>Submit</button>
</div>
茅侃侃
TA贡献1842条经验 获得超21个赞
考虑以下（没有positioning）：
.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>
至尊宝的传说
TA贡献1789条经验 获得超10个赞
您可以通过设计而.container不是input. 然后使input透明，就是这样：
.container {
display: flex;
width: 300px;
justify-content: center;
align-items: center;
padding: 2px;
background-color: #fce6ef;
border-radius: 50px;
border: 1px solid #ffc5dd;
}
input {
height: 54px;
font-size: 20px;
width: 100%;
background-color: transparent;
border-radius: 50px 0 0 50px;
border: none;
outline: none;
}
button {
height: 54px;
width: 94px;
background-color: #ff0266;
color: #ffffff;
text-transform: uppercase;
border-style: none;
border-radius: 50px;
}
<div class="container">
<input type="text">
<button>Submit</button>
</div>
九州编程
TA贡献1785条经验 获得超4个赞
你不能在技术上把它放在输入里面，但你可以绝对定位在输入里面 position: absolute 在按钮上和 position relative 在容器上。然后将其放置在顶部、左侧、右侧等位置。
<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>
智慧大石
TA贡献1946条经验 获得超3个赞
试试这个哥们 希望这是你需要的。我所做的只是使输入透明，并使外部 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;
}
添加回答
举报
0/150
提交
取消