Make sure that the input field and label are aligned side by side in the

Question

Make sure that the input field and label are aligned side by side in the

Is there a way to arrange the following HTML in the specified layout?

<div>
    <div>
        <label>Counterparty</label>
        <input id="paymentsApp-inpt-cpty" ng-model="selectedPaymentCopy.counterparty" ng-required="true"  />
    </div>
    <div>
        <label>Value Date</label>
        <input id="paymentsApp-inpt-date" ng-model="selectedPaymentCopy.valueDate" />
    </div>
    <div>
        <label>Credit Account</label>
        <input id="paymentsApp-inpt-acc" ng-model="selectedPaymentCopy.creditAccount" />
    </div>
    <div>
        <label>Amount</label>
        <input id="paymentsApp-inpt-amt" ng-model="selectedPaymentCopy.amount" />
    </div>
</div>

I am not using bootstrap for this project. Could someone guide me on the CSS needed to achieve this look?

https://i.stack.imgur.com/JspVG.png

html css

Answer 1

Answer №1

Technique #1: Flexbox:

div > div {
    display: flex;
}

div > div > label {
    flex-basis: 125px;
}

div > div > input {
    flex: 1;
}

DEMO

Method #2: Using display: inline-block:

div > div > label {
    display: inline-block;
    width: 125px;
}

div > div > input {
    display: inline-block; /* optional */
}

DEMO

Keep in mind that while flexbox is widely supported, some older browsers like IE 8 & 9 may not fully support it. Certain browsers like Safari 8 and IE10 may require vendor prefixes for flexbox. To easily add the necessary prefixes, you can use a tool like Autoprefixer.

Answer 2

Technique #1: Flexbox:

div > div {
    display: flex;
}

div > div > label {
    flex-basis: 125px;
}

div > div > input {
    flex: 1;
}

DEMO

Method #2: Using display: inline-block:

div > div > label {
    display: inline-block;
    width: 125px;
}

div > div > input {
    display: inline-block; /* optional */
}

DEMO

Keep in mind that while flexbox is widely supported, some older browsers like IE 8 & 9 may not fully support it. Certain browsers like Safari 8 and IE10 may require vendor prefixes for flexbox. To easily add the necessary prefixes, you can use a tool like Autoprefixer.

Answer 3

Answer №2

Although flex is a reliable choice and I often use it effectively, there are subtle issues that may arise if you are not fully acquainted with its behavior.

If you prefer a simpler alternative, consider floating the inputs to the right. In this case, place the input before the label and keep the label as is.

Here are the styles (slightly verbose for clarity, with a fixed width set for the container):

.test {
    width: 400px;
}
.test > div > input {
    float: right;
}

Markup (note the switched position of input and label):

<div class="test">
    <div>
        <input id="paymentsApp-inpt-cpty" ng-model="selectedPaymentCopy.counterparty" ng-required="true"  />
        <label>Counterparty</label>
    </div>
    <div>
        <input id="paymentsApp-inpt-date" ng-model="selectedPaymentCopy.valueDate" />
        <label>Value Date</label>
    </div>
    <div>
        <input id="paymentsApp-inpt-acc" ng-model="selectedPaymentCopy.creditAccount" />
        <label>Credit Account</label>
    </div>
    <div>
        <input id="paymentsApp-inpt-amt" ng-model="selectedPaymentCopy.amount" />
        <label>Amount</label>
    </div>
</div>

Answer 4

Although flex is a reliable choice and I often use it effectively, there are subtle issues that may arise if you are not fully acquainted with its behavior.

If you prefer a simpler alternative, consider floating the inputs to the right. In this case, place the input before the label and keep the label as is.

Here are the styles (slightly verbose for clarity, with a fixed width set for the container):

.test {
    width: 400px;
}
.test > div > input {
    float: right;
}

Markup (note the switched position of input and label):

<div class="test">
    <div>
        <input id="paymentsApp-inpt-cpty" ng-model="selectedPaymentCopy.counterparty" ng-required="true"  />
        <label>Counterparty</label>
    </div>
    <div>
        <input id="paymentsApp-inpt-date" ng-model="selectedPaymentCopy.valueDate" />
        <label>Value Date</label>
    </div>
    <div>
        <input id="paymentsApp-inpt-acc" ng-model="selectedPaymentCopy.creditAccount" />
        <label>Credit Account</label>
    </div>
    <div>
        <input id="paymentsApp-inpt-amt" ng-model="selectedPaymentCopy.amount" />
        <label>Amount</label>
    </div>
</div>

Make sure that the input field and label are aligned side by side in the

Answer №1

Answer №2

Similar questions

Choose a specific div element from a collection of dynamically generated divs in Angular

The vanishing act of custom fonts in Internet Explorer

Tips for applying a class to two elements when a checkbox is clicked and avoiding duplicated URL strings

I'm having trouble retrieving a list of elements from a Python class in order to showcase them in an HTML file

Form tag definitions are missing on the login page

Accessing JS code from HTML is not possible in React

What is the best way to load the contents of an HTML file into a <div> element without it behaving as an object?

Tips for deleting part of the URL at the end of all hyperlinks on a webpage

Issues with the aligning of buttons using the justify-content property

Disable the display of meridian in the UI Bootstrap datetime picker

Using JQuery to animate a division towards the left

Display or conceal form elements depending on the JSON response

How can I make CSS text-overflow ellipsis trigger a pop-up to display lengthy text when clicked?

Error: Java Applet cannot be found

Sending text from a Tinymce textarea using Laravel 4.2

The alignment of Div elements is off in IE8

Discovering the method to access a file without the standard .html or .php extension on the local host at 127.0.0

Image not being shown by ng-src

What is the best way to adjust the size of a div element so that it is

JavaScript is having trouble locating the HTML select element