CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Masoud Alali
Masoud Alali

Reputation: 137

Item alignment in html

I've a navbar in my html bootstrap-based page that has these items:

item7 item6 item5 item4 item3 item2 item1

It is in Persian and should be arranged right to left.

When it loads on phone it shows items like this:

 - item7
 - item6
 - item5
 - item4
 - item3
 - item2
 - item1

How can I arrange them in this way:

 - item1
 - item2
 - item3
 - item4
 - item5
 - item6
 - item7

css:

element.style {
    text-align: right;
}
.navbar-nav {
    margin: 7.5px -15px;
}
.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
ol, ul {
    margin-top: 0;
    margin-bottom: 10px;
}

Upvotes: 0

Views: 74

Answers (3)

Eliran Malka
Eliran Malka

Reputation: 16283

I recommend keeping the markup in its semantic order, as @Abhitalks suggested, but use RTL (Right To Left) in the document level.

That way, you don't have to mess around with floats at all.

There are RTL plugins for Bootstrap that make it easier for you, e.g. morteza's.

Upvotes: 2

Himesh Aadeshara
Himesh Aadeshara

Reputation: 2131

Hi dude i think normally by applying float : right side of li's then you can achieve your way.

and you can apply them like this

(your selector or ul ) li{
float : right;   //apply additional css styles
}

Upvotes: 1

Abhitalks
Abhitalks

Reputation: 28437

Do not arrange the list items from right to left in the markup. Keep them in original order;

  <ul class="nav navbar-nav">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
  </ul>

Then, override the Bootstrap style of .navbar-nav > li for larger screen sizes to float-right.

@media (min-width: 768px) {
    .navbar-nav > li {
        float: right;
    }
}

This way, on large screen sizes when the nav is shown horizontally it will reverse your order. But, on smaller screen sizes when the list items are collapses, they will preserve the original order when shown vertically.

Demo: http://jsfiddle.net/abhitalks/jwcagnwv/

.

Upvotes: 2

Related Questions