it-swarm.com.de

Ein Element in der Liste wird mit CSS3 rechts ausgerichtet

Ich habe eine Liste wie folgt:

<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>

Ich füge an, was ich bisher gemacht habe..

In diesem Menü möchte ich das Feedback an der rechten Seite ausrichten. Kann mir jemand sagen, wie es geht?

17
user2091061

Fügen Sie dies Ihrem Css hinzu.

li:last-child wählt die letzte li der Menüliste aus.

Demo

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

Verwenden Sie einfach 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>

Sie können die - Demo hier überprüfen.

8
Minko Gechev

Neben float können Sie auch position:absolute innerhalb eines position:relative-Containers verwenden. (Inline-CSS nur für Beispielzwecke.)

<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Ø

Dadurch wird das gesamte Menü nach rechts gezogen und das Dropdown-Untermenü wird auch nach rechts gezogen, anstatt vom Bildschirm angezeigt zu werden.

 <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