Position the label to the right and left of the input field for alignment

I've been struggling to create an input form with labeled using a dl, dt, dd list. I want the first label on the left, the second on the right, and the input in the center. However, no matter what I try, I can't get the second label to align correctly next to the input...

Here is an example of what I'm aiming for:

Example Image

Here's my current attempt:

dt {
  clear: both;
  width: 25%;
  float: right;
  text-align: left;
}

label {
  font: 11px Tahoma, sans-serif;
  color: #000;
}

dd {
  float: right;
  width: 25%;
  margin: 0 0 15px;
}
<dl class="inline">
  <dt><label for="name">label1</label></dt>
  <dd>
    <input type="text" id="name" class="text" />
    <small>input description</small>
  </dd>
  <dt><label for="name">label2</label></dt>
</dl>

Note: I really prefer to stick with using dl, dt, dd elements.

htmlcssresponsive-design

Answer №1

Just align everything to the left side:

dt,
dd {
  float: left;
  margin:5px;
}
dd small {
  display:block;
}

/* Centering all elements */
dl {
 display:table;
 margin:auto;
}
/**/

label {
  font: 11px Tahoma, sans-serif;
  color: #000;
}
<dl class="inline">
  <dt><label for="name">label1</label></dt>
  <dd>
    <input type="text" id="name" class="text" />
    <small>input description</small>
  </dd>
  <dt><label for="name">label2</label></dt>
</dl>

Answer №2

I am providing the expected code snippet for your requirement to add display:flex and justify-content:space-between properties to the .inline class.

.inline{
display:flex;
justify-content:space-between;
margin:0px 10px;
}


.inline {
  display: flex;
  justify-content: space-between;
  margin: 0px 10px;
}
<dl class="inline">
  <dt><label for="name">label1</label></dt>
  <dd>
    <input type="text" id="name" class="text" />
    <small>input description</small>
  </dd>
  <dt><label for="name">label2</label></dt>
</dl>

Implementing the use of float:

.inline {
  width: 100%;
}

.left {
  width: 25%;
  float: left;
  text-align: left;
}

.right {
  width: 25%;
  float: right;
  text-align: right;
}

label {
  font: 11px Tahoma, sans-serif;
  color: #000;
}

dd {
  margin: 0 0 15px;
  width:50%;
  float:left;
  text-align:center;
}
<dl class="inline">
  <dt class="left"><label for="name">label1</label></dt>
  <dd>
    <input type="text" id="name" class="text" />
    <small>input description</small>
  </dd>
  <dt class="right"><label for="name">label2</label></dt>
</dl>

Using the positioning properties for alignment:

.inline {
  position: relative;
  margin: 0px 10px;
}

.center {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  text-align: center;
}

.left {
  position: absolute;
  left: 0;
}

.right {
  position: absolute;
  right: 0;
}
<dl class="inline">
  <dt class="left"><label for="name">label1</label></dt>
  <dd class="center">
    <input type="text" id="name" class="text" />
    <small>input description</small>
  </dd>
  <dt class="right"><label for="name">label2</label></dt>
</dl>

Answer №3

When using dl, dd, and dt in HTML, these elements are typically block elements by default. To ensure they appear on the same line, all you need to do is style them as inline or inline-block.

.inline > * {
  display: inline-block;
}
<dl class="inline">
  <dt><label for="name">label1</label></dt>
  <dd>
    <input type="text" id="name" class="text" />
    <small>input description</small>
  </dd>
  <dt><label for="name">label2</label></dt>
</dl>

Answer №4

If you're looking for a solution, consider utilizing flexbox.

Keep in mind that the effectiveness of this approach may vary depending on the browsers you are targeting, whether responsiveness is crucial, and your CSS structure.

dl.inline {
  display: flex;
  justify-content: flex-end;
}

.inline dt {
  width: 25%;
}
.inline dt:first-child {
  text-align: right;
}

.inline dd {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 0 15px;
  margin: 0;
}

label {
  font: 11px Tahoma, sans-serif;
  color: #000;
}
<dl class="inline">
  <dt><label for="name">label1</label></dt>
  <dd>
    <input type="text" id="name" class="text" />
    <small>input description</small>
  </dd>
  <dt><label for="name">label2</label></dt>
</dl>

Answer №5

A unique solution using no flexbox and an inline approach.

dl {
  text-align: center;
}

dt {
  display: inline-block;
}

label {
  font: 11px Tahoma, sans-serif;
  color: #000;
}

dd {
  display: inline-block;
  margin: 0 5px 0 5px;
}

small {
  display: table-row;
}
<dl class="inline">
  <dt><label for="name">label1</label></dt>
  <dd>
    <input type="text" id="name" class="text" />
    <small>input description</small>
  </dd>
  <dt><label for="name">label2</label></dt>
</dl>

Answer №6

It seems like you are looking for something along these lines.

div {
        display: flex;
        justify-content: center;
        align-items: center;
    }
<div>
        <label>label1</label>
        <input type="text">
        <label>label2</label>
    </div>

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

What is the reason for the disappearance of unordered list bullets when using padding: 0?

Updating an older website that contains numerous unordered lists has presented a challenge. When the padding is set to 0, the display markers on the unordered list disappear. The root cause of this issue was traced back to the CSS setting *{padding: 0; ma ...

htmlcsshtml-lists

Guide on how to toggle disabled input text box upon checking checkbox using JavaScript

When the checkbox next to the appended text box is checked, I want to disable that text box. The hard-coded text box is already disabled when its checkbox is checked. You can see the actual outcome by running the code snippet or check out the screenshots b ...

javascriptjqueryhtmlcheckbox

What is the process of importing a cascading style sheet into a C# object?

Currently, I am working on a web application and I would like to provide users with the flexibility to change the styling elements of CSS linked to a page through an admin screen. I have been exploring ways to load a CSS file into a C# object or convert ...

c#cssobject

What are some ways to eliminate the excess white space beneath the footer in HTML?

After creating a responsive webpage that works flawlessly on mobile devices and tablets, I noticed a problem with the footer when viewed on desktop. There is an empty white space at the end of the webpage, and upon inspecting the browser, it focuses on the ...

htmlcsssass

What is the method used by React or Next to prevent the <a> tag from refreshing the page while still loading content?

I'm currently diving into the world of NextJS and utilizing the Link component from the 'next/link' package. One thing that has been puzzling me is how the <Link> component ultimately renders an <a> tag with a href='/tosomew ...

javascripthtmlreactjsreact-routernext.js

Ensuring the validity of input tags

I encountered an issue with an input tag that has a specific logic: https://codepen.io/ion-ciorba/pen/MWVWpmR In this case, I have a minimum value retrieved from the database (400), and while the logic is sound, the user experience with the component lea ...

javascripthtmljquerycss

Center text with font awesome symbols

I'm looking for a way to vertically align text next to my FontAwesome icons without using manual padding. Is there a better method for achieving this? https://i.stack.imgur.com/PWwSJ.jpg <div class="row"> <div id="tb-testimonial" class="tes ...

htmlcssfont-awesome

Define the total in a CSS attribute

I am working with multiple divs that have a specific CSS class applied to them. My goal is to manually increase the pixel value in the top property: .class { top: 100px; } div class="class" style="top:+=50px" Is it possible to achieve this functiona ...

css

Animated slide-out menu with icon using jQuery

I am in the process of creating a menu using CSS and jQuery that will display an icon for each menu item. When a user hovers over a menu item for 0.5 seconds, I want it to slide slowly to the left to show the name of the menu. This is similar to what you ...

jqueryhtmlcss

What is the best way to draw a rectangle outline in Vue.js without the need for any additional packages?

I have been attempting to craft a rectangle outline using vueJS, but so far I have not had much success. I am hoping to achieve this using only CSS, but despite my efforts, I have not been able to find a solution. My goal is to create something similar to ...

javascriptcssvue.jsbootstrap-vue

Is it possible for Susy to output a pixel-based span?

As a newbie to Susy, I hope you don't mind if I ask a seemingly silly question... I'm trying to figure out how to calculate responsive padding within a Susy grid. The standard formula is: (target / context) x 100. Is there a way for Susy to pr ...

phpcsssusy-compasssusy

Display all information associated with the class that matches the clicked ID

Can anyone help me with a Jquery question? I am trying to display all data with the same class when I click on it. I have created a list of clickable items. When I click on an item, the corresponding data should be shown. However, the code I wrote is not ...

javascriptjqueryhtml

Tips for enabling autoplay for videos in Owl Carousel

I am facing an issue with implementing autoplay functionality for videos in an owl carousel. Despite trying different solutions found online, including this Owl Carousel VIDEO Autoplay doesn’t work, I haven't been able to make it work. Additionally, ...

javascriptjquerycssowl-carousel

Establishing connections between HTML and CSS files

After writing my html and css code, I noticed that the files are not linking properly. Despite checking for errors, I couldn't find any issues within the codes. Here is a snippet of my html file: <!DOCTYPE html> <html lang="en" dir= ...

htmlcss

The sticky navigation bar becomes fixed at the top prematurely

Having a sticky navbar on my Bootstrap-based website, I've implemented the following jQuery code: $(document).ready(function () { var flag = false; function stickNav() { $(".navbar-default").affix({ o ...

jquerycsstwitter-bootstrapnavbarsticky

arranging texts in a vertical stack with wrapping

Looking to change the orientation of my horizontally wrapped list items from vertical to horizontal. Take a look at my code snippet: HTML <ul> <li>Long text goes here.</li> <li>Another Longer Text Goes Here</li> < ...

htmlcsswhitespaceword-wrap

Utilizing the HTML button element within an ASP file combined with JavaScript can lead to the reloading of the

I am attempting to create a JavaScript function for an HTML button element. However, I have noticed that it causes the page to reload. Strangely, when I use an input with a button type, everything works perfectly. What could be causing this issue and why a ...

javascriptasp.nethtml

Is it possible to execute this animation with a single click for repetitive playback?

CODEPEN const btt = document.querySelector('.btt'); btt.addEventListener('click', function(){ this.classList.toggle('anime'); }); Is there a way to achieve the desired effect with just one click? ...

javascripthtmljquerycsscss-animations

What is the method for absolutely positioning an element with separate targets for the `left` and `right` properties?

Seeking a complex CSS result that may seem impossible. Consider the following scenario: <div class="div1"> <div class="div2"> <div class="div3"> <div class="div4"></div> ...

htmlcssflexboxpositionabsolute

Space constraints within an li element

Is there a solution to resolve the unusual impact of margins/paddings? Check out this example on jsfiddle: jsfiddle. Here is the screenshot of the issue: i.imgur.com/64S8C.jpg. I want to eliminate any margins/paddings in the li element. ...

htmlcss