![](/img/trans.png)
[英]How do I create a HTML/PHP form where the text input fields are horizontally aligned side by side
[英]How do I get two side by side html input fields to look combined with a middle separator that is less than the input field heights?
您好,您可以将两个输入字段括在div中,然后在其中添加边距。 这是我所做的摘要;
请运行下面的代码段,谢谢。
$(".input-group-wrapper input").on("focus", function() { $(this).parent().addClass("focus"); }); $(".input-group-wrapper input").on("focusout", function() { $(this).parent().removeClass("focus"); });
.input-group-wrapper { border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.1); display: inline-block; transition: 0.2s; width: 100%; } .input-group-wrapper>.first, .input-group-wrapper>.second { border: none; line-height: 30px; display: inline; margin: 6px 0px 6px 0px; padding: 0px 8px 0px 8px; } .input-group-wrapper>.first { width: 60%; border-right: 1px solid rgba(0, 0, 0, 0.1); } .input-group-wrapper>.second { width: 30%; } .input-group-wrapper>.first:focus, .input-group-wrapper>.first:active, .input-group-wrapper>.second:focus, .input-group-wrapper>.second:active { outline: none; } .focus { border: 2px solid rgba(0, 100, 200, 0.6); }
<div class='input-group-wrapper'> <input class='first' placeholder='eg Read every day p3 @goals #learning' /> <input class='second' value='Aug 4 2018' /> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
为了获得这种外观,您需要在其中一个上使用边距。 我在下面链接了我的代码和一支电笔:
.modified{ height: 30px; border-radius: 2px; border: 1px solid lightgray; box-shadow: none; padding: 3px 6px; } .modified.right{ margin-left: -10px; width: 125px;/* Alternatively use % or vw */ } .modified.right::placeholder{ color: black; }
<input type="text" class="modified" placeholder="Just Test Me"/> <input type="text" class="modified right" placeholder="I Am Testing" />
我希望这有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.