Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Alinear último 'li' a la derecha de 'ul' en un menú horizontal

 Estas en el tema de Alinear último 'li' a la derecha de 'ul' en un menú horizontal en el foro de CSS en Foros del Web. Hola, antes de nada, agradecer el interés desinteresado por ayudar. estoy usando el siguiente menú: http://cssmenumaker.com/menu/responsive-flat-menu como podría alinear el último 'li', para quedara a ...
  #1 (permalink)  
Antiguo 26/11/2015, 10:06
 
Fecha de Ingreso: septiembre-2010
Ubicación: /home/
Mensajes: 103
Antigüedad: 13 años, 7 meses
Puntos: 17
Pregunta Alinear último 'li' a la derecha de 'ul' en un menú horizontal
Hola,
antes de nada, agradecer el interés desinteresado por ayudar.

estoy usando el siguiente menú: http://cssmenumaker.com/menu/responsive-flat-menu

como podría alinear el último 'li', para quedara a la derecha del todo?

he probado con el siguiente código pero no llego a conseguir lo que busco (css no es mi fuerte)
Código CSS: 
Ver original
  1. #cssmenu ul li.last {
  2.     margin-left: auto;
  3. }
  4.  
  5. #cssmenu li:last-of-type{
  6.     margin-left: auto;
  7. }

el código original es el siguiente
Código HTML: 
Ver original
  1. <div id='cssmenu'>
  2.         <ul>
  3.            <li class='active'><a href='#'>Home</a></li>
  4.            <li><a href='#'>Products</a>
  5.               <ul>
  6.                  <li><a href='#'>Product 1</a>
  7.                     <ul>
  8.                        <li><a href='#'>Sub Product</a></li>
  9.                        <li><a href='#'>Sub Product</a></li>
  10.                     </ul>
  11.                  </li>
  12.                  <li><a href='#'>Product 2</a>
  13.                     <ul>
  14.                        <li><a href='#'>Sub Product</a></li>
  15.                        <li><a href='#'>Sub Product</a></li>
  16.                     </ul>
  17.                  </li>
  18.               </ul>
  19.            </li>
  20.            <li><a href='#'>About</a></li>
  21.            <li><a href='#'>Contact</a></li>
  22.         </ul>
  23.         </div>

Código CSS: 
Ver original
  1. body
  2. {
  3.     margin: 0;
  4.     padding: 0;
  5.     font: 12px Tahoma, Arial, sans-serif;    
  6. }
  7. #cssmenu,
  8. #cssmenu ul,
  9. #cssmenu ul li,
  10. #cssmenu ul li a,
  11. #cssmenu #menu-button {
  12.     margin: 0;
  13.     padding: 0;
  14.     border: 0;
  15.     list-style: none;
  16.     line-height: 1;
  17.     display: block;
  18.     position: relative;
  19.     -webkit-box-sizing: border-box;
  20.     -moz-box-sizing: border-box;
  21.     box-sizing: border-box;
  22. }
  23. #cssmenu:after,
  24. #cssmenu > ul:after {
  25.     content: ".";
  26.     display: block;
  27.     clear: both;
  28.     visibility: hidden;
  29.     line-height: 0;
  30.     height: 0;
  31. }
  32. #cssmenu #menu-button {
  33.     display: none;
  34. }
  35. #cssmenu {
  36.     font-family: Tahoma, Arial, sans-serif;
  37.     font-size: 12px; 
  38.     background: #3C3C3C;
  39. }
  40. #cssmenu > ul > li {
  41.     float: left;
  42. }
  43. #cssmenu ul li:hover > a,
  44. #cssmenu ul li.active > a {
  45.   background: #4989c8;
  46.   color: #ffffff;
  47. }
  48. #cssmenu.align-center > ul {
  49.   font-size: 0;
  50.   text-align: center;
  51. }
  52. #cssmenu.align-center > ul > li {
  53.   display: inline-block;
  54.   float: none;
  55. }
  56. #cssmenu.align-center ul ul {
  57.   text-align: left;
  58. }
  59. #cssmenu.align-right > ul > li {
  60.   float: right;
  61. }
  62. #cssmenu > ul > li > a {
  63.   padding: 17px;
  64.   font-size: 12px;
  65.   letter-spacing: 1px;
  66.   text-decoration: none;
  67.   color: #dddddd;
  68.   font-weight: 700;
  69.   text-transform: uppercase;
  70. }
  71. #cssmenu > ul > li:hover > a {
  72.     background-color: #4989c8;
  73.     color: #ffffff;
  74. }
  75. #cssmenu > ul > li.has-sub > a {
  76.   padding-right: 30px;
  77. }
  78. #cssmenu > ul > li.has-sub > a:after {
  79.   position: absolute;
  80.   top: 22px;
  81.   right: 11px;
  82.   width: 8px;
  83.   height: 2px;
  84.   display: block;
  85.   background: #dddddd;
  86.   content: '';
  87. }
  88. #cssmenu > ul > li.has-sub > a:before {
  89.   position: absolute;
  90.   top: 19px;
  91.   right: 14px;
  92.   display: block;
  93.   width: 2px;
  94.   height: 8px;
  95.   background: #dddddd;
  96.   content: '';
  97.   -webkit-transition: all .25s ease;
  98.   -moz-transition: all .25s ease;
  99.   -ms-transition: all .25s ease;
  100.   -o-transition: all .25s ease;
  101.   transition: all .25s ease;
  102. }
  103. #cssmenu > ul > li.has-sub:hover > a:before {
  104.   top: 23px;
  105.   height: 0;
  106. }
  107. #cssmenu ul ul {
  108.   position: absolute;
  109.   left: -9999px;
  110. }
  111. #cssmenu.align-right ul ul {
  112.   text-align: right;
  113. }
  114. #cssmenu ul ul li {
  115.   height: 0;
  116.   -webkit-transition: all .25s ease;
  117.   -moz-transition: all .25s ease;
  118.   -ms-transition: all .25s ease;
  119.   -o-transition: all .25s ease;
  120.   transition: all .25s ease;
  121. }
  122. #cssmenu li:hover > ul {
  123.   left: auto;
  124. }
  125. #cssmenu.align-right li:hover > ul {
  126.   left: auto;
  127.   right: 0;
  128. }
  129. #cssmenu li:hover > ul > li {
  130.   height: 35px;
  131. }
  132. #cssmenu ul ul ul {
  133.   margin-left: 100%;
  134.   top: 0;
  135. }
  136. #cssmenu.align-right ul ul ul {
  137.   margin-left: 0;
  138.   margin-right: 100%;
  139. }
  140. #cssmenu ul ul li a {
  141.   border-bottom: 1px solid rgba(150, 150, 150, 0.15);
  142.   padding: 11px 15px;
  143.   width: 170px;
  144.   font-size: 12px;
  145.   text-decoration: none;
  146.   color: #dddddd;
  147.   font-weight: 400;
  148.   background: #3C3C3C;
  149. }
  150. #cssmenu ul ul li:last-child > a,
  151. #cssmenu ul ul li.last-item > a {
  152.   border-bottom: 0;
  153. }
  154. #cssmenu ul ul li:hover > a,
  155. #cssmenu ul ul li a:hover {
  156.   color: #ffffff;
  157.   background-color: #4989c8;
  158. }
  159. #cssmenu ul ul li.has-sub > a:after {
  160.   position: absolute;
  161.   top: 16px;
  162.   right: 11px;
  163.   width: 8px;
  164.   height: 2px;
  165.   display: block;
  166.   background: #dddddd;
  167.   content: '';
  168. }
  169. #cssmenu.align-right ul ul li.has-sub > a:after {
  170.   right: auto;
  171.   left: 11px;
  172. }
  173. #cssmenu ul ul li.has-sub > a:before {
  174.   position: absolute;
  175.   top: 13px;
  176.   right: 14px;
  177.   display: block;
  178.   width: 2px;
  179.   height: 8px;
  180.   background: #dddddd;
  181.   content: '';
  182.   -webkit-transition: all .25s ease;
  183.   -moz-transition: all .25s ease;
  184.   -ms-transition: all .25s ease;
  185.   -o-transition: all .25s ease;
  186.   transition: all .25s ease;
  187. }
  188. #cssmenu.align-right ul ul li.has-sub > a:before {
  189.   right: auto;
  190.   left: 14px;
  191. }
  192. #cssmenu ul ul > li.has-sub:hover > a:before {
  193.   top: 17px;
  194.   height: 0;
  195. }
  196. @media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  197.   #cssmenu {
  198.     width: 100%;
  199.   }
  200.   #cssmenu ul {
  201.     width: 100%;
  202.     display: none;
  203.   }
  204.   #cssmenu.align-center > ul {
  205.     text-align: left;
  206.   }
  207.   #cssmenu ul li {
  208.     width: 100%;
  209.     border-top: 1px solid rgba(120, 120, 120, 0.2);
  210.   }
  211.   #cssmenu ul ul li,
  212.   #cssmenu li:hover > ul > li {
  213.     height: auto;
  214.   }
  215.   #cssmenu ul li a,
  216.   #cssmenu ul ul li a {
  217.     width: 100%;
  218.     border-bottom: 0;
  219.   }
  220.   #cssmenu > ul > li {
  221.     float: none;
  222.   }
  223.   #cssmenu ul ul li a {
  224.     padding-left: 25px;
  225.   }
  226.   #cssmenu ul ul ul li a {
  227.     padding-left: 35px;
  228.   }
  229.   #cssmenu ul ul li a {
  230.     color: #dddddd;
  231.     background: none;
  232.   }
  233.   #cssmenu ul ul li:hover > a,
  234.   #cssmenu ul ul li.active > a {
  235.     color: #ffffff;   
  236.   }
  237.   #cssmenu ul ul,
  238.   #cssmenu ul ul ul,
  239.   #cssmenu.align-right ul ul {
  240.     position: relative;
  241.     left: 0;
  242.     width: 100%;
  243.     margin: 0;
  244.     text-align: left;
  245.   }
  246.   #cssmenu > ul > li.has-sub > a:after,
  247.   #cssmenu > ul > li.has-sub > a:before,
  248.   #cssmenu ul ul > li.has-sub > a:after,
  249.   #cssmenu ul ul > li.has-sub > a:before {
  250.     display: none;
  251.   }
  252.   #cssmenu #menu-button {
  253.     display: block;
  254.     padding: 17px;
  255.     color: #dddddd;
  256.     cursor: pointer;
  257.     font-size: 12px;
  258.     text-transform: uppercase;
  259.     font-weight: 700;
  260.   }
  261.   #cssmenu #menu-button:after {
  262.     position: absolute;
  263.     top: 22px;
  264.     right: 17px;
  265.     display: block;
  266.     height: 4px;
  267.     width: 20px;
  268.     border-top: 2px solid #dddddd;
  269.     border-bottom: 2px solid #dddddd;
  270.     content: '';
  271.   }
  272.   #cssmenu #menu-button:before {
  273.     position: absolute;
  274.     top: 16px;
  275.     right: 17px;
  276.     display: block;
  277.     height: 2px;
  278.     width: 20px;
  279.     background: #dddddd;
  280.     content: '';
  281.   }
  282.   #cssmenu #menu-button.menu-opened:after {
  283.     top: 23px;
  284.     border: 0;
  285.     height: 2px;
  286.     width: 15px;
  287.     background: #ffffff;
  288.     -webkit-transform: rotate(45deg);
  289.     -moz-transform: rotate(45deg);
  290.     -ms-transform: rotate(45deg);
  291.     -o-transform: rotate(45deg);
  292.     transform: rotate(45deg);
  293.   }
  294.   #cssmenu #menu-button.menu-opened:before {
  295.     top: 23px;
  296.     background: #ffffff;
  297.     width: 15px;
  298.     -webkit-transform: rotate(-45deg);
  299.     -moz-transform: rotate(-45deg);
  300.     -ms-transform: rotate(-45deg);
  301.     -o-transform: rotate(-45deg);
  302.     transform: rotate(-45deg);
  303.   }
  304.   #cssmenu .submenu-button {
  305.     position: absolute;
  306.     z-index: 99;
  307.     right: 0;
  308.     top: 0;
  309.     display: block;
  310.     border-left: 1px solid rgba(120, 120, 120, 0.2);
  311.     height: 46px;
  312.     width: 46px;
  313.     cursor: pointer;
  314.   }
  315.   #cssmenu .submenu-button.submenu-opened {
  316.     background: #262626;
  317.   }
  318.   #cssmenu ul ul .submenu-button {
  319.     height: 34px;
  320.     width: 34px;
  321.   }
  322.   #cssmenu .submenu-button:after {
  323.     position: absolute;
  324.     top: 22px;
  325.     right: 19px;
  326.     width: 8px;
  327.     height: 2px;
  328.     display: block;
  329.     background: #dddddd;
  330.     content: '';
  331.   }
  332.   #cssmenu ul ul .submenu-button:after {
  333.     top: 15px;
  334.     right: 13px;
  335.   }
  336.   #cssmenu .submenu-button.submenu-opened:after {
  337.     background: #ffffff;
  338.   }
  339.   #cssmenu .submenu-button:before {
  340.     position: absolute;
  341.     top: 19px;
  342.     right: 22px;
  343.     display: block;
  344.     width: 2px;
  345.     height: 8px;
  346.     background: #dddddd;
  347.     content: '';
  348.   }
  349.   #cssmenu ul ul .submenu-button:before {
  350.     top: 12px;
  351.     right: 16px;
  352.   }
  353.   #cssmenu .submenu-button.submenu-opened:before {
  354.     display: none;
  355.   }
  356. }

Saludos y gracias
Última edición por Bugger; 26/11/2015 a las 10:50
  #2 (permalink)  
Antiguo 26/11/2015, 11:35
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 9 años, 5 meses
Puntos: 91
Respuesta: Alinear último 'li' a la derecha de 'ul' en un menú horizontal
algo asi quieres amigo?

http://codepen.io/AngelKrak/pen/ZbdvvZ

Código CSS: 
Ver original
  1. #cssmenu ul li:last-child {
  2.   float: right;
  3. }
  #3 (permalink)  
Antiguo 26/11/2015, 14:40
 
Fecha de Ingreso: septiembre-2010
Ubicación: /home/
Mensajes: 103
Antigüedad: 13 años, 7 meses
Puntos: 17
Respuesta: Alinear último 'li' a la derecha de 'ul' en un menú horizontal
exactamente eso.

Muchísimas gracias

Etiquetas: alinear, background, color, derecha, float, horizontal, todo, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 13:24.