Html 如何在文本字段中插入按钮（附图像）

在我的表单中，我有一个禁用的文本字段，它的值是一个数字，例如price，因此我想在该字段内或上方添加submit按钮，以生成类似于此图像的内容：

      <input name="" type="text" maxlength="50" value="£0.00" id="" disabled>
      <button value="submit">Submit</button>

提交

实际上，您不需要在输入中包含submit按钮，只需将其显示出来即可

您需要做的是将这两个元素放置在彼此相邻的位置，然后以使它们同时显示的方式设置它们的样式

要使元素彼此相邻，可以使用各种css技术，例如

display:inline block，它在保持块元素属性的同时将元素内联放置（彼此相邻，在同一“行”上）。或者，如果要在元素周围包装一个容器，可以使用
float
定位元素，或者
display:table cell内部
显示：表格容器。（如果你想进一步研究的话，还有更多的方法！）

对于样式，尤其是在您的示例图像中，可以通过仅在每个元素的外角使用边界半径来实现此效果，使内部元素保持方形并彼此齐平，然后围绕外部边缘使用边界使其显示为一个。同样，如果您有一个容器元素，您可以对其进行样式设置，以在外边缘创建效果，然后对输入和按钮分别进行样式设置。
不太明白您想要实现什么。
如果希望隐藏文本字段（因此“提交”按钮将替换文本字段的位置），则应使用type=“hidden”而不是禁用。如果您只想相邻显示这两个元素，并设置（css）宽度和浮动：left，则可以将这两个元素放在一个div中。如果您坚持将按钮放在文本字段上，您可以将按钮的位置设置为绝对位置（在包含div的区域内）。
您主要只需要将输入和容器边界半径设置为使其看起来正确即可。主要样式包括：

div.radius {
    width:100px;
    border-radius:10px;
    background:gainsboro;
    overflow:hidden;

}
div.radius input[type='text']{
    display:inline-block;
    float:left;
    width:70%;
    box-shadow:inset 0px 3px 5px 0px rgba(25,25,25,0.3);
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border:0;
    margin:0
}

请看演示以查看一个实现的小示例。您可以通过一些元素模块化以及实现规范化来剪切代码。如果还有其他事情，请告诉我：）

演示


编辑

用禁用的文本更新了JSFIDLE。
您尝试过类似的方法吗？谢谢您的帖子，非常有用