OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Align first line to the left, while other to the right using CSS

  • Thread starter Thread starter Robert Kusznier
  • Start date Start date
R

Robert Kusznier

Guest
Is it possible to have the first line of text (or inline-blocks) aligned to the left, while the next one to the right using only CSS? I'm sure it can be done using JS, but am looking for a cleaner and simpler solution.

I have this navigation bar (which is a <ol> in the markup). It's usually one-line long, but recently we got a case, when it's grew long enough, so that it broke to the second line. Below is the photo of that. What my boss asked me to do is align the second line to the right, while keeping the first intact.

Now it looks like that:
Broken navigation bar


What I'm aiming for is this (I'd then make some fixes to make it look prettier than on the picture below):
Navigation bar goal-look


The markup. All li items are inline-blocks, but I could change that.

Code:
<ol class="phase-labels">
  <li class="phase-label phase-current">Company</li>
  <li class="phase-label phase-inactive">The Policy</li>
  <li class="phase-label phase-inactive">Property Insurance</li>
  <li class="phase-label phase-inactive">Additional Clauses</li>
  <li class="phase-label phase-inactive">Public Liability</li>
  <li class="phase-label phase-inactive">Public Liability Additional</li>
  <li class="phase-label phase-inactive">Employers Liability</li>
  <li class="phase-label phase-inactive">Quotes</li>
</ol>
<p>Is it possible to have the first line of text (or inline-blocks) aligned to the left, while the next one to the right using only CSS? I'm sure it can be done using JS, but am looking for a cleaner and simpler solution.</p>

<p>I have this navigation bar (which is a <code><ol></code> in the markup). It's usually one-line long, but recently we got a case, when it's grew long enough, so that it broke to the second line. Below is the photo of that. What my boss asked me to do is align the second line to the right, while keeping the first intact.</p>

<p>Now it looks like that:
<img src="https://i.sstatic.net/6Jxsc.png" alt="Broken navigation bar"></p>

<p>What I'm aiming for is this (I'd then make some fixes to make it look prettier than on the picture below):
<img src="https://i.sstatic.net/0pJzY.png" alt="Navigation bar goal-look"></p>

<p>The markup. All <code>li</code> items are <strong>inline-blocks</strong>, but I could change that.</p>

<pre><code><ol class="phase-labels">
<li class="phase-label phase-current">Company</li>
<li class="phase-label phase-inactive">The Policy</li>
<li class="phase-label phase-inactive">Property Insurance</li>
<li class="phase-label phase-inactive">Additional Clauses</li>
<li class="phase-label phase-inactive">Public Liability</li>
<li class="phase-label phase-inactive">Public Liability Additional</li>
<li class="phase-label phase-inactive">Employers Liability</li>
<li class="phase-label phase-inactive">Quotes</li>
</ol>
</code></pre>
Continue reading...
 

Latest posts

Top