web-dev-qa-db-fra.com

Faire un élément de la liste aligner à droite en utilisant CSS3

J'ai une liste comme suit:

<ul id="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">Work</a>
      <ul>
           <li><a href="#">CSS Development</a></li>
           <li><a href="#">Graphic Design</a></li>
           <li><a href="#">Development Tools</a></li>
           <li><a href="#">Web Design</a></li>
      </ul>
  </li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact Us</a></li>
  <li><a href="#">Feedback</a></li>
</ul>

J'attache une image de ce que j'ai fait jusqu'à présent..

Dans ce menu, je souhaite aligner les commentaires sur le côté droit .. Est-ce que quelqu'un peut dire comment le faire?

csshtml5css3css-selectors
17
user2091061

Ajoutez ceci à votre Css.

li:last-child sélectionnera la dernière li de la liste du menu.

Démo

#menu > li:last-child
{
    float:right;
}
21
PSL

Il suffit d'utiliser float: right;:

<ul id="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">Work</a>
      <ul>
           <li><a href="#">CSS Development</a></li>
           <li><a href="#">Graphic Design</a></li>
           <li><a href="#">Development Tools</a></li>
           <li><a href="#">Web Design</a></li>
      </ul>
  </li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact Us</a></li>
  <li style="float: right;"><a href="#">Feedback</a></li>
</ul>

Vous pouvez consulter la démo ici.

8
Minko Gechev

En plus de float, vous pouvez également utiliser position:absolute à l'intérieur d'un conteneur position:relative. (Css en ligne à titre d'exemple uniquement.)

<ul id="menu" style="position:relative;width:1008px;height:40px;display:block;">
 <li class="right" style="position:absolute;right:20px;">
    <a href="#">Feedback</a></li>
4
AbsoluteƵERØ

Cela tirera tout le menu vers la droite et le sous-menu déroulant tirera à droite également au lieu de s'afficher hors de l'écran.

 <div class="top-menu">
    <ul class="nav navbar-nav pull-right"><li class="dropdown dropdown-user">
         <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
          <i class="icon-settings"></i>
          <i class="fa fa-angle-down"></i>
        </a>
       <ul class="dropdown-menu pull-right">
          <li>
            <a href="page_user_profile_1.html">
              <i class="icon-user"></i> My Profile
            </a>
         </li>
      </ul>
    </li>
  </ul>
</div>
0
JoshYates1980