Tips for positioning a div between two vertically aligned input elements

I'm trying to figure out how to place a div between two inputs with the same height and vertically aligned. It seems like a simple task, but for some reason, the code below isn't working:

input{
    width: 35%;
    border: 1px solid #A7A7A7;
    display: inline-block;
    font-size: 11px;
    padding: 0 5px;
    line-height: 18px;
}
input:first-child{
    border-right: none;
}
input:nth-child(3){
    border-left: none;
}
#between_inputs{
    width: 10px;
    height: 18px;
    display: inline-block;
    background-color: white;
    border-top: 1px solid #A7A7A7;
    border-bottom: 1px solid #A7A7A7;
    line-height: 18px;
}
<input type="text" name="min" placeholder="min."/><div id="between_inputs"></div><input type="text" name="max"  placeholder="max."/>

It seems that the div is being placed above the inputs. What could be causing this issue?

htmlcss

Answer №1

If you want to achieve this using the Flexbox, here's how:

.flex {
  display: flex; /* sets the display property of the parent container to flex */
}

input {
  width: 35%;
  border: 1px solid #A7A7A7;
  display: inline-block;
  font-size: 11px;
  padding: 0 5px;
  line-height: 18px;
}

input:first-child {
  border-right: none;
}

input:nth-child(3) {
  border-left: none;
}

#between_inputs {
  width: 10px;
  display: inline-block;
  background: Lavender;
  border-top: 1px solid #A7A7A7;
  border-bottom: 1px solid #A7A7A7;
  line-height: 18px;
}
<div class="flex">
  <input type="text" name="min" placeholder="min.">
  <div id="between_inputs"></div>
  <input type="text" name="max"  placeholder="max.">
</div>

Answer №2

Include vertical-align property in the input styling:

input{
    width: 40%;
    border: 1px solid #E8E8E8;
    display: inline-block;
    font-size: 12px;
    padding: 0 7px;
    line-height: 20px;
    vertical-align: middle;/* <<<< important */
}

Answer №3

To ensure perfect alignment, you can apply the style vertical-align: middle to both the inputs and the div. Additionally, reduce the height of the div to 17px.

input{
    width: 35%;
    border: 1px solid #A7A7A7;
    display: inline-block;
    font-size: 11px;
    padding: 0 5px;
    line-height: 18px;
    vertical-align: middle
}
input:first-child{
    border-right: none;
}
input:nth-child(3){
    border-left: none;
}
#between_inputs{
    width: 10px;
    height: 17px;
    display: inline-block;
    background-color: white;
    border-top: 1px solid #A7A7A7;
    border-bottom: 1px solid #A7A7A7;
    line-height: 18px;
    vertical-align: middle
}
<input type="text" name="min" placeholder="min."/><div id="between_inputs"></div><input type="text" name="max"  placeholder="max."/>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

jQuery - class remains unchanged on second click event

Operations: Upon clicking on an element with the class thumb_like or thumb_unlike, a like will be added or removed for the image using a POST request. The element with the class thumb_count will increase or decrease based on user actions. For example, lik ...

javascriptjqueryhtml

How to dynamically display a div in Vue.js depending on the attributes of another element

I have a dilemma with my text container. My goal is to collapse the div if the text length exceeds a certain limit, and then display a button that says "...show more". When this button is clicked, the div should expand. Clicking it again should collapse th ...

javascripthtmlcssvue.js

Customizing arrays in DataTables allows for creating new columns and displaying them in the table according to the specified customizations

Displaying dynamic data in a data table involves taking an array as input and customizing the fields within that array. ...

jqueryhtmlcssajax

Unlock the Power of Vue Draggable in Vue.js 3 with These Simple Steps

When attempting to implement Draggable in Vue.js 3, I encountered an error message: VueCompilerError: v-slot can only be used on components or <template> tags. Below is a snippet of my code: <draggable tag="transiton-group" name="s ...

javascripthtmlvue.jsdraggablevuejs3

What are the best strategies for optimizing my CSS drop down menu to be both responsive and mobile-friendly?

I am struggling to make my current CSS and HTML menu fully responsive and mobile-friendly. I have researched solutions from other sources but have been unable to implement them successfully. I am seeking help in modifying my menu so that it adjusts to smal ...

htmlcssdrop-down-menuresponsive-design

How to automatically switch to the next tab in Bootstrap using JQuery when the video finishes

I recently developed a tabbing system featuring 4 tabs using Bootstrap. While it currently functions manually, I am seeking a way to have it loop automatically upon video completion. Below is my current code: <div id="tab"> <ul class="nav nav ...

jqueryhtmltwitter-bootstrapjquery-selectors

Show the form for user input

I have an HTML code for a form that requires input. Once the 'OK' button is clicked, the values are sent to a PHP script using $_POST. Is it possible to display the same form again if the input format is incorrect, but do so only within my PHP sc ...

phphtml

How can the input value be transmitted along with the formArray values?

I am currently working with a FormArray in my project where I can add new fields and submit the entire form data on button click. However, I am facing an issue trying to display and send an input field that is connected to the 'name' attribute wi ...

htmlangulartypescriptinput

New HTML5 feature enables users to upload images onto canvas, enabling them to drag, rotate, and even

I'm a beginner in Html5 and I'm having trouble with uploading an image to the canvas. When I provide the direct source of the image, it works fine. I referred to this link for help javascript: upload image file and draw it into a canvas. Let me s ...

jqueryhtmlimagecanvas

HTML formatting for text

I recently created an HTML website using Dreamweaver. I faced an issue while trying to design a section within an article using tables to incorporate both text and images. Unfortunately, the tables did not have rounded edges as I desired. I am reaching out ...

htmlcsshtml-tableformatting

Angular problem arises when attempting to map an array and selectively push objects into another array based on a specific condition

Setting up a cashier screen and needing an addToCart function seems pretty simple, right? However, I am encountering a strange logical error. When I click on an item to add it to the cart, my function checks if the item already exists in the array. If it d ...

htmlarraysangulartypescript

What is the method for updating the form action to alter the hash without causing a page reload?

My website is designed to show dynamic data based on the information following the '#' in the URL. Surprisingly, when I manually change this value in the URL, the page doesn't reload. However, if I modify it within a form on the site, the we ...

javascriptjqueryhtmlformshash

Is it possible to exclusively focus on the specified data attributes?

Is there a method to specifically target the 'data-season' attribute with the value "winter"? This is my HTML: <li data-season="summer">summer <ul class="groups"> <li data-item="beach">beach</li> <li data-item ...

javascriptjquerycsstarget

What could be causing the variations in appearance of my HTML forms between Sharepoint and jsfiddle?

Currently, I am working on a Sharepoint Web Part mockup in this fiddle. As shown below, the second form is not yet formatted or aligned properly: Additionally, there are issues with the alignment of the second form, which appears a row below where it shou ...

htmlcsssharepoint-2010web-parts

The functionality of my Javascript code is restricted to a single element within a Python embedded for loop in Django2

My Python for loop is iterating through these HTML template cards, each accompanied by JavaScript. However, I'm encountering an issue where the JavaScript only seems to work on the first element (specifically, it's meant to retrieve the seeked po ...

javascriptpythonhtmldjangoaudio

Close the overlay by clicking outside of it

I'm working on creating a unique pop-up window that appears when a customer adds a product to their cart. The design features red and green background divs with a darker overlay (#overlay-daddy) and a white child div (#overlay). My issue arises from ...

javascripthtmlcss

Vertically center text in an email within a div using HTML

i'm struggling to perfectly center the text within a div in an HTML email. While it appears fine in Browserview with proper line-height, issues arise in Apple Mail and Outlook where it doesn't align vertically. <div style='width: 80%; ...

htmlcssoutlookhtml-emailtext-align

Overrides of variables are not always complete

After setting up my project with npm install to utilize sass overrides, I encountered an issue. Despite adjusting the $theme-colors, only part of the page reflects the change. https://i.sstatic.net/xjrsx.png I attempted the following: $theme-colors: ("p ...

csssassbootstrap-4

How can you use JavaScript/jQuery to scroll to the top of a DIV?

When a link is clicked, I have a <div> popup that appears. This popup contains scrollable content when there is overflow. If the same link is clicked again, I want the <div> to be positioned at the top of the scrollable area. While this functi ...

javascriptjqueryhtmlcssinternet-explorer

Even though I have the image button's ID, I am unable to successfully click on it

I am facing an issue where I can't seem to click on an image button even though I know its ID: driver.findElement(By.id("its Id")).click() Unfortunately, I cannot provide the website link as it is not a public website. However, I have pasted the HTM ...

javascripthtmlseleniumselenium-webdriverselenium-chromedriver