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

disabling empty elements in a React JS JavaScript component

Currently, I am retrieving data from an API where users can post content up to 3 times. However, if a user has not posted three times, empty boxes with padding and background color will appear. I want to remove all elements that do not have any content wit ...

javascripthtmlreactjs

What is the best way to divide a page into four equal sections using two container divs?

I am working on a webpage layout that requires dividing it into four equal sections. The challenge is overlapping text onto two of these sections, which complicates the design process. My solution is to stack two container DIVs on top of each other, both w ...

htmlcss-floatcontainersequals

When the left/top/right/bottom properties are not specified, using position:fixed produces the desired results in Firefox and Internet Explorer, but not in Safari

It's unfortunate that I have to bring up another question related to position:fixed, but after going through various other questions and forum threads, I'm still not clear on this particular issue. The code below is a simple illustration of how ...

csscss-position

Exploring the world of web scraping using R's XML package with the powerful xpathS

I need help extracting the names of shopping malls from a specific website. The URL is provided here: After examining the html code, I noticed that the mall names are stored under the "h5" tag. I tried to extract the text using the following codes, but it ...

htmlrxmlweb-scraping

How to add a background image in CSS with HTML's help

I am a beginner learning HTML and CSS, attempting to incorporate a Full Screen Background Image using CSS. Unfortunately, the code I have written is not working as expected despite following various tutorials. Below is my code: HTML file <!DOCTYPE htm ...

htmlcss

Determine the total number of instances an HTML div element is utilized within a PHP script

Having conducted interviews with over 40 individuals, I'm looking to showcase this with a PHP script. Each interview comes with its own set of CSS classes, and adding an extra class or utilizing an existing one can help me determine the total number ...

phpcsshtml

CSS - Nesting classes within one another

I'm currently working on customizing a Tumblr theme. Users have the option to choose between a one-column or two-column layout style, and I'm facing some challenges with implementing this in the CSS code. I attempted to add a class based on the u ...

htmlcss

The issue with the ng-click property not triggering arises when it is assigned to a button that is generated dynamically

I need to construct a table dynamically based on the results returned from SQL. In this scenario, populating the table with the start time, end time, and user is straightforward: var StartTime = document.createElement('td'); var EndTime = docume ...

javascripthtmlangularjs

Trouble arises when accessing GET form in php/Ajax

I am in the process of creating a dynamic website. At the top, I have an input form that, when submitted, should display the output from an asynchronous request to a PHP page using echo to show what was submitted. Unfortunately, it's not functioning ...

javascriptphpjqueryhtmlajax

Feeling lost when it comes to forms and hitting that submit button?

Below is a sample form structure: <html> <head> <title>My Page</title> </head> <body> <form name="myform" action="http://www.abcdefg.com/my.cgi" method="POST"> <div align="center"> <br><br; <br& ...

javascripthtmlcss

The necessity of using Adobe Photoshop for optimizing a Web Template

My interest lies in utilizing web templates, such as the one referenced here:- templete However, within its details tab, it specifies that the following software is required:- Adobe Photoshop CS+ Sublime Text2 or later, Notepad++, Dreamweaver CS5.5+(Co ...

htmlcssdreamweaverphotoshop

The hyperlink in the HTML code is malfunctioning

While working on a Wix website, I encountered an issue with the code snippet below: // JavaScript var countries = [ { name: 'Thailand', link: 'www.google.com' }, { name: 'Tanzania', link: '' }, { name: &ap ...

javascripthtmlcss

Tips for converting each item within an array into its own separate element

I currently have an array of objects that I am utilizing to generate a table in Angular. The table is functioning properly and successfully displays the data. However, I now have a requirement to enable editing for each individual object within the table. ...

htmlarraysjsonangulartypescript

Displaying a URL inside a div upon clicking a specified href link in an Angular application

After hours of searching on various search engines, I am still unable to find the solution to my problem. My goal is to display the URL in a div once it has been clicked using $http for dynamic links. Here's an example of what I'm trying to achi ...

htmlangularjs

Creating an HTML Canvas effect where images are placed onto another image

Looking to create a similar effect as seen on this website () On this site, users can upload their images (4000 * 400) and have the option to add Mickey Mouse ears over their image before saving it. The Mickey Mouse ear is resizable from all four sides f ...

javascriptjqueryhtmlcanvas

Express Form Validation: Ensuring Data Accuracy

I have recently learned that client-side form validations may not be sufficient to prevent malicious actions from users. It is recommended to also validate the form on the server-side. Since I am new to using express, can someone provide guidance on what s ...

javascripthtmlnode.jsexpress

Issue with Rendering Rapheal Pie Chart in Internet Explorer 9

I encountered an issue in IE9 where I received the error message "SVG4601: SVG Path data has incorrect format and could not be completely parsed" while trying to draw a pie chart on an HTML5 page using Raphael JS and SVG. The problem arose when the "d" att ...

htmlsvginternet-explorer-9raphaelpie-chart

Modifying Stroke color in HTML5 Canvas

I am attempting to create a unique visual effect by drawing a circle resembling a clock using canvas 2d context. The idea is to initially draw the circle in black starting at point p1, and then when I complete a full circle tour it should erase as the colo ...

javascripthtmlcanvasgraphics

Extracting the URL of the @font-face declaration in CSS with the use of JavaScript

Currently, my CSS file contains numerous @font-face tags. Each tag specifies a unique font-family and src URL. @font-face{ font-family: Garamond; src: url('ePrintFonts/pcl_91545.ttf'); } @font-face{ font-family: C ...

javascriptjqueryhtmlcss

I have implemented a button in PHP and now I am looking to invoke a function when that button is clicked

I have a PHP-generated HTML button and I'm having trouble calling the mybtn3() function when it is clicked. The button code looks like this: echo"<td width=14% align=center><input type=button value=Export onclick=mybtn3() /></td>"; ...

javascriptphphtml