如何使用 css flexbox 在文本输入中创建一个按钮？
我正在尝试使用按钮创建一个简单的输入文本。但我想要输入框内的按钮。我正在使用 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>
附上图片以便更好地理解：
慕码人2483693浏览 188回答 5
5回答
-
潇潇雨雨
因为它.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> -
茅侃侃
考虑以下（没有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> -
至尊宝的传说
您可以通过设计而.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> -
九州编程
你不能在技术上把它放在输入里面，但你可以绝对定位在输入里面 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> -
智慧大石
试试这个哥们 希望这是你需要的。我所做的只是使输入透明，并使外部 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;}
随时随地看视频慕课网APP
相关分类
JavaScript