How do I place a textbox on/in a button in the same form?
تبليغسؤال
يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.
HTML:
<html>
<body>
<form action=”” method=”post”>
<button class=”action”>Purchase</button>
<input class=”quantity” name=”quantity” type=”text” value=”1″>
</form>
</body>
</html>
CSS:
.action
{ width: 200px;
text-align: left;
}
.quantity
{ width: 30px;
float: right;
}
Fiddle: https://jsfiddle.net/kpz0g7vt/3/
I want the textbox to float:right ON TOP OF the button. That is, overlapping it. Currently the textbox is floating AFTER the button.
It should look as if the <input> is a child of <button> as seen in this fiddle: https://jsfiddle.net/kpz0g7vt/4/
What is the best way to achieve this?
I could hardcode the placement with CSS margins, but I worry this is bad practice and/or leads to undesired behavior in different browsers.
Thank you.
أضف إجابة