CODEWITHSUNDEEP
csshtml
Nope
Nope

Reputation: 111

How to align a <li> element which is in a div to the right side of the div?

I am trying to do a master page for my web page. I'm using HTML5 and Bootstrap framework. On the top of page there will be a bar that contains a dropdown menu and I would like to align this dropdown menu to the right.

 <div class="navbar-collapse collapse" id="navbar-mobile">
        <ul class="nav navbar-nav" style="">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle " data-toggle="dropdown">Departments<span class="caret"></span></a>

                <ul class="dropdown-menu width-200">
                    <li class="dropdown-submenu">
                    <li><a href="#">E</a></li>
                    <li><a href="#">F</a></li>
                    <li><a href="#">A</a></li>
                    <li><a href="#">B</a></li>
                    <li><a href="#">C</a></li>
                </ul>
            </li>
        </ul>

I tried

<style="float:right;">

but it didn't work and i think the reason is dropdown class is not allowing it to work. It worked with using

<style="padding-left:680px;">

but i guess it's not the right way of doing this, there must be a better way. Also what happens if I use "padding-left" and I want to add something to the left of this "li" element?

This is the screen output of the bar I am talking about.

The question is that how can I do that alignment?

Thanks

Best regards

Upvotes: 0

Views: 105

Answers (4)

Wojciech
Wojciech

Reputation: 103

You can use the "navbar-right" class <ul class="nav navbar-nav navbar-right">. I recommend you to look at the bootstrap documentation and check this link bootstrap navbar component

Upvotes: 0

Jonathan Odle
Jonathan Odle

Reputation: 69

Wrap your dropdown with <div align="right">...</div> this will ensure the text in the dropdown is all right aligned.

Upvotes: 0

Bhavin Solanki
Bhavin Solanki

Reputation: 4818

You can use .pull-right class to ul element which is comes with bootstrap.

HTML Example

<ul class="nav pull-right">
  <li class="dropdown">
    <a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">
      Menu 2
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="propertiesSearch.php">Logout</a></li>
    </ul>
  </li>
</ul>

For those using Bootstrap 3, .navbar-right would do the trick.

<ul class="nav navbar-nav navbar-right">

</ul>

Upvotes: 1

Shailesh
Shailesh

Reputation: 717

To right-align a menu, use .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

Upvotes: 0

Related Questions