How to make a some part of text align right in html-CodePudding

I have my Header and I need to show a text as below,

Dashboard                                   User_1

Simply the Dashboard should be in left side while user_1 should be at the right side. My Header as follows,

<div >Dashboard  <a href="updatedetails.php" style="text-align:right"><?php echo htmlspecialchars($_SESSION["username"]); ?></a></div>

But this provides both Dashboard User_1 at the same place. Can someone help me to seperate those two as I required?

update:

If I need to use another text at the right of username? what would be the change to do? Then Dashboard to be at left corner while username and the other text should be in right side.

Dashboard                                   User_1 Logout

CodePudding user response：

I would recommend looking into flexbox. This is just a simple example to get you started, but this will be a lot more flexible as you scale up or down resolutions on different devices.

CSS Tricks provides a guide for flexbox too that would be worth a read for you.

You may not be able to use this exact code I have, but it should be a decent jumping-off point for you at least.

.flex {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

<div style="width: 98vw;">
  <div >
    <a>Dashboard</a>
    <div>
      <a>username</a>
      <a>logout</a>
    </div>
  </div>
</div>

CodePudding user response：

There are different ways you can achieve it. You can use flex or float.

Using flex with justify-content: space-between
Using float: left and right

.flex-header {
  display: flex;
  justify-content: space-between;
}


.left {
  float: left;
}

.right {
  float: right;
}

<div >
  Dashboard
  <a href="updatedetails.php">Sample text</a>
</div>


<div >
  <span >Dashboard</span>
  <a  href="updatedetails.php">Sample text</a>
</div>

CodePudding user response：

An < a> tag is an inline element. You can use display: flex for example:

<div style="display: flex; justify-content: space-between;"> 
   <div>
      Dashboard
   </div>
   <a href="updatedetails.php" style="text-align:right"><?php echo htmlspecialchars($_SESSION["username"]); ?></a>
</div>