如何获得两个并排的html输入字段，使其看起来小于小于输入字段高度的中间分隔符？

Question

I want to achieve something like below

How do I style the html and css?

Answer 1

Hello you can enclose the two input fields in a div then add margins inside. Here's a summary of what I did;

1. put input fields inside a div
2. remove borders from the input fields
3. add margin on top & bottom of the input fields (this would be the spacing on top and bottom of the separator)
4. add a border on the right of the first input field

Do run the snippet below, thanks.

 $(".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> 

Answer 2

To achieve this look, you'll want to use a margin on one of them. I have my code and a Code Pen linked below:

  .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" /> 

Codepen Example

I hope this helps!