Align text to the right using CSS

My website structure is simple:
Username: [           ]   |
Password: [           ]   |
The issue is that I want them to align with the vertical bars on the right side. Here's the code:

<form i  d="cred">
      <h3 class="credin">Username:</h3>
      <input class="credin" type="text" name="username" value=""> <br>
      <h3 class="credin">Password:</h3>
      <input class="credin" type="password" name="password" value=""> <br>
      <a><p id="logout">(Sign up)</p></a>
      <input id="login" type="submit" value="Log in">
    </form>

And here's the corresponding CSS:

.credin {
        font-size:21px;
        margin:0px;
        display:inline;
        font-family:Arial, sans-serif;
    }
    #login {
        font-size:24px;
        margin-bottom:0px;
        padding-bottom:0px;
        width:30%;
    }
    #logout {
        margin:0px;
        font-size:19px;
    }
    input.credin{
        margin-left:auto;
        margin-right:0px;
        padding-right:0px;
        padding-left:auto;
    }

Here's a bigger view:

.credin {
            font-size:21px;
            margin:0px;
            display:inline;
            font-family:Arial, sans-serif;
        }
        #login {
            font-size:24px;
            margin-bottom:0px;
            padding-bottom:0px;
            width:30%;
        }
        #logout {
            margin:0px;
            font-size:19px;
        }
        input.credin{
            margin-left:auto;
            margin-right:0px;
            padding-right:0px;
            padding-left:auto;
        }
<form i  d="cred">
          <h3 class="credin">Username:</h3>
          <input class="credin" type="text" name="username" value=""> <br>
          <h3 class="credin">Password:</h3>
          <input class="credin" type="password" name="password" value=""> <br>
          <a><p id="logout">(Sign up)</p></a>
          <input id="login" type="submit" value="Log in">
        </form>
htmlcss

Answer №1

If I were to redesign it, I would go with the following structure:

<form id="loginForm">
  <div>
        <label class="inputLabel">Username:</label>
        <input class="textInput rightAligned" type="text" name="username" value="">
  </div>
  <div style="clear: both;">
        <label class="inputLabel">Password:</label>
        <input class="textInput rightAligned" type="password" name="password" value="" > <br>
  </div>
  <div>
        <a href="#signup"><p id="signupLink">(Sign up)</p></a>
        <button id="loginBtn" type="submit">Log in</button>
  </div>
    </form>

For styling, the CSS can be set as follows:

#loginForm {
  width: 500px;
}
.inputLabel {
    font-size:21px;
  font-weight: bold;
  display: inline-block;
    font-family:Arial, sans-serif;
  float: left;
}
#loginBtn {
    font-size:24px;
    margin-bottom:0px;
    padding-bottom:0px;
    width:30%;
}
#signupLink {
    font-size:19px;
}
input.textInput {
    margin-left:auto;
    margin-right:0px;
    padding-right:0px;
    padding-left:auto;
}
input.textInput.rightAligned {
  float: right;
}

Of course, this is just a quick solution and it's always good to explore alternative options for improvement.

Answer №2

give this one a shot

<html>
<body>
  Username:<br>
  <input type="text" name="username">
  <br>
  Password:<br>
  <input type="password" name="password">
  <br><br>
  <button type="submit">Log In</button>
</body>

Answer №3

**Here are two solutions for you to consider:

1 st- (Add directly to your CSS)**

form {
    overflow: hidden;
  }
  input {
    float: right;
    clear: both;
  }

2nd- (Add directly to your CSS)

form {
  direction: rtl;
}
input {
  display: block;
  direction: ltr;
}

Answer №4

A convenient and trustworthy option is to utilize a table for this purpose.

<form i  d="cred">
<table>
<tr>
  <td><h3 class="credin">Username:</h3></td>
  <td><input class="credin" type="text" name="username" value=""> </td>
</tr>
<tr>
  <td><h3 class="credin">Password:</h3></td>
  <td><input class="credin" type="password" name="password" value=""></td>
</tr>
<tr>
  <td colspan=2><a><p id="logout">(Sign up)</p></a><td>
</tr>
<tr>
  <td colspan=2><input id="login" type="submit" value="Log in"></td>
</tr>
</table>
</form>

Although EnterSB's solution is effective, it may present challenges when attempting to expand the system :)

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

Can static html files be served in ASP.NET without the need for programming annotations?

When sending static html to clients, it's important to ensure that any "" comments are removed to avoid security risks. Is there a way to achieve this? Perhaps something similar to Razor's "@* comment *@" but for html... ...

htmlasp.netasp.net-mvcsecurityrazor

What are the steps to turn off the blue hyperlinks on iOS devices?

One example of this issue can be observed in time-formatted text like (00:10 - 10:55) and a time select menu displaying (08:00 AM). I have attempted the following solutions, but none of them have resolved the problem: Mobile Safari/iPhone Mail.app HTML ...

javascriptiosiphonecssjquery-mobile

How to make a range slider using HTML

I am currently working with a range slider that displays only one value, but I want to show two limits - the minimum and maximum values. This is similar to a price range slider where users can select a range of prices. I need to store both the min and max ...

javascriptjqueryhtmlcss

Using Selenium and Python to scrape text from a continuously refreshing webpage after each scroll

Currently, I am utilizing Selenium/python to automatically scroll down a social media platform and extract posts. At the moment, I am gathering all the text in one go after scrolling a set number of times (see code below), but my objective is to only gathe ...

javascriptpythoncssseleniumselenium-webdriver

Unsuccessful response from an AJAX callback function

Issue: I am able to successfully pass a value to the ajax method and execute a Select SQL query (results visible in Network tab), but I never receive any results back (I expect an alert saying "Success"). What could be causing this issue? HTML: function ...

phphtmlajaxcallback

Utilizing jQuery to dynamically pass parameters to the YouTube API

When making a request to the YouTube API, I am structuring it as follows: $.get("https://www.googleapis.com/youtube/v3/channels", { part: "contentDetails", id: "somestring", key: "MY-API-KEY" } /*, ...*/ ) A hidden field contains the value id ...

javascriptjqueryhtmlyoutubeyoutube-api

Having trouble getting rid of the border-bottom?

I have been attempting to customize the appearance of the React Material UI tabs in order to achieve a design similar to this: https://i.stack.imgur.com/tBS1K.png My efforts involved setting box-shadow for the selected tab and removing the bottom border. ...

javascripthtmlcssreactjsmaterial-ui

In what way can I ensure that my Google Map iFrame becomes responsive by utilizing Bootstrap?

My approach involved duplicating the iFrame code multiple times with different aspect ratios to show or hide them based on specific sizes. Is there a more efficient or concise way to achieve this? <div class="container map d-none d-xl-block">< ...

javascripthtmlcsstwitter-bootstrapiframe

What is the correct way to target CSS child elements?

If I wanted to customize the background of the initial 2 <div> elements within the "main" <div> in the following HTML snippet. SOURCE CODE <div class="main"> <div>1</div> <div>2</div> <div>3< ...

htmlcss

What could be causing the cell containing my image to not resize along with the image?

I'm attempting to create a table with 4 cells, each containing an image. My goal is to use a test image for now and set the size of the image in percentage so that it resizes with the window. However, I am facing an issue where when I specify the imag ...

htmlcsshtml-table

Looking to enhance current CSS3 organizational chart by adding a second primary level

I'm having difficulty trying to replicate the first-level (director) box with a vertical line in between. The original chart only has one level with subs below. Take a look at the image provided to see the desired outcome... You can find the CodePen ...

htmlcss

Tips for aligning the dialog box in the center of the screen based on the current scroll position

Is there a way to center the dialog box vertically at the current scroll position of the window when any of the "show dialog" buttons are clicked? For instance, if I click on location 3, I want the dialog box to be centered vertically within the current v ...

javascripthtmlcssmodal-dialogcenter

When Safari injects elements that were previously hidden with display:none, they remain visible

Using the JS library MagnificPopup, I implement popups on my website triggered by a "read more" button. This library moves the html to display it in a different location and then injects it back when the popup is closed. While this functionality works seam ...

javascriptcsssafarimagnific-popup

Guide on how to include an .env file within an HTML script tag?

I am trying to protect my API Key when sending a request to the server by storing it in an .env variable. However, I am unsure how to access this variable within a script tag in HTML. Can anyone provide guidance on how to achieve this? ...

htmlnode.js

Rearrange the sequence of floating elements

Below is the code for a series of divs div { float: left; width: 33.33%; height: 50px; } #container { width: 100%; } #title, #image, #descr { display: inline-block; } #title, #descr { float: right; } @media only screen and (max-width: ...

htmlcss

Press a button to navigate through a series of web pages

Currently, I am working on a website focused on profiles. The challenge I am facing is implementing fixed side buttons (SKIP and ADD) that will cycle through the list of profiles. I understand that I may need to create an array to store all the profiles, ...

javascripthtmlarraysbutton

What could be causing my jQuery animation to lack smoothness?

I am experiencing an issue where, after a delay, my element completely jumps across the screen to its new position when I animate its height. Strangely, this problem only occurs when using pixel values and not percentages. Unfortunately, I need to use pi ...

jqueryhtmlanimation

Evaluating QUnit Test Cases

How do you write a test method in QUnit for validating functions developed for a form? For example, let's consider a form where the name field should not be left blank. If the validation function looks like this: function validNameCheck(form) { if ...

javascripthtmlqunit

Ignore the initial children of the highest level divs exclusively

Is there a way to apply a style to all top-level divs within a div, excluding the first one? I have tried using not(:first-child) but it seems to be recursive. How can this be achieved? <div class='want-to-skip-first-a'> <div class= ...

htmlcss

Styling with CSS to create a layout similar to Facebook Messages

I am attempting to design a web layout similar to Facebook's Messages page, with a fixed height header and footer, and a flexible height main element. Within the main element, there needs to be: A div (100% height of the main elem.) that is scrolla ...

htmlcssflexboxscrollable