html - 以不同方式显示列表的最后一项

如何以不同的方式显示列表的最后一项？

http://www.orafivenetiassociati.ennestudio.net/le-marche/

问题是前 3 个元素没问题，但最后一个元素超出了 body，在小屏幕上该元素将无法显示。因此列表“Argenti”必须显示在单个列中。

所以，我必须让“Argenti”忽略一部分 CSS。

目前，这部分代码创建了三个子列:

li > ul {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}

(function($) {
$.fn.menumaker = function(options) {  
 var cssmenu = $(this), settings = $.extend({
   format: "dropdown",
   sticky: false
 }, options);
 return this.each(function() {
   $(this).find(".button").on('click', function(){
     $(this).toggleClass('menu-opened');
     var mainmenu = $(this).next('ul');
     if (mainmenu.hasClass('open')) { 
       mainmenu.slideToggle().removeClass('open');
     }
     else {
       mainmenu.slideToggle().addClass('open');
       if (settings.format === "dropdown") {
         mainmenu.find('ul').show();
       }
     }
   });
   cssmenu.find('li ul').parent().addClass('has-sub');
multiTg = function() {
     cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
     cssmenu.find('.submenu-button').on('click', function() {
       $(this).toggleClass('submenu-opened');
       if ($(this).siblings('ul').hasClass('open')) {
         $(this).siblings('ul').removeClass('open').slideToggle();
       }
       else {
         $(this).siblings('ul').addClass('open').slideToggle();
       }
     });
   };
   if (settings.format === 'multitoggle') multiTg();
   else cssmenu.addClass('dropdown');
   if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function() {
  var mediasize = 700;
     if ($( window ).width() > mediasize) {
       cssmenu.find('ul').show();
     }
     if ($(window).width() <= mediasize) {
       cssmenu.find('ul').hide().removeClass('open');
     }
   };
   resizeFix();
   return $(window).on('resize', resizeFix);
 });
  };
})(jQuery);

(function($){
$(document).ready(function(){
$("#cssmenu").menumaker({
   format: "multitoggle"
});
});
})(jQuery);

* {
    margin: 0;
    padding: 0;
    text-decoration: none
}

body {
    background: #555;
}

header {
    position: relative;
    width: 100%;
    background: #333;
}

.logo {
    position: relative;
    z-index: 123;
    padding: 10px;
    font: 18px verdana;
    color: #6DDB07;
    float: left;
    width: 15%
}

.logo a {
    color: #6DDB07;
}

nav {
    position: relative;
    width: 100%;
    margin: 0 auto;
    text-align: center
}

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #head-mobile {
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

#cssmenu:after,
#cssmenu > ul:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0
}

#cssmenu #head-mobile {
    display: none
}

#cssmenu {
    font-family: sans-serif;
    background: #333
}

#cssmenu > ul > li {
    display: inline-block;
    text-align: center
}

#cssmenu > ul > li > a {
    padding: 17px;
    font-size: 12px;
    letter-spacing: 1px;
    text-decoration: none;
    color: #ddd;
    font-weight: 700;
}

#cssmenu > ul > li:hover > a,
#cssmenu ul li.active a {
    color: #fff
}

#cssmenu > ul > li:hover,
#cssmenu ul li.active:hover,
#cssmenu ul li.active,
#cssmenu ul li.has-sub.active:hover {
    background: #28b8d8!important;
    -webkit-transition: background .3s ease;
    -ms-transition: background .3s ease;
    transition: background .3s ease;
}

#cssmenu > ul > li.has-sub > a {
    padding-right: 30px
}

#cssmenu > ul > li.has-sub > a:after {
    position: absolute;
    top: 22px;
    right: 11px;
    width: 8px;
    height: 2px;
    display: block;
    background: #ddd;
    content: ''
}

#cssmenu > ul > li.has-sub > a:before {
    position: absolute;
    top: 19px;
    right: 14px;
    display: block;
    width: 2px;
    height: 8px;
    background: #ddd;
    content: '';
    -webkit-transition: all .25s ease;
    -ms-transition: all .25s ease;
    transition: all .25s ease
}

#cssmenu > ul > li.has-sub:hover > a:before {
    top: 23px;
    height: 0
}

#cssmenu ul ul {
    position: absolute;
    left: -9999px
}

#cssmenu ul ul li {
    height: 0;
    -webkit-transition: all .25s ease;
    -ms-transition: all .25s ease;
    background: #333;
    transition: all .25s ease
}

#cssmenu ul ul li:hover {}

#cssmenu li:hover > ul {
    left: auto
}

#cssmenu li:hover > ul > li {
    height: 35px
}

#cssmenu ul ul ul {
    margin-left: 100%;
    top: 0
}

#cssmenu ul ul li a {
    border-bottom: 1px solid rgba(150, 150, 150, 0.15);
    padding: 11px 15px;
    width: 170px;
    font-size: 12px;
    text-decoration: none;
    color: #ddd;
    font-weight: 400;
}

#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
    border-bottom: 0
}

#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
    color: ##28b8d8
}

#cssmenu ul ul li.has-sub > a:after {
    position: absolute;
    top: 16px;
    right: 11px;
    width: 8px;
    height: 2px;
    display: block;
    background: #ddd;
    content: ''
}

#cssmenu ul ul li.has-sub > a:before {
    position: absolute;
    top: 13px;
    right: 14px;
    display: block;
    width: 2px;
    height: 8px;
    background: #ddd;
    content: '';
    -webkit-transition: all .25s ease;
    -ms-transition: all .25s ease;
    transition: all .25s ease
}

#cssmenu ul ul > li.has-sub:hover > a:before {
    top: 17px;
    height: 0
}

#cssmenu ul ul li.has-sub:hover,
#cssmenu ul li.has-sub ul li.has-sub ul li:hover {
    background: #363636;
}

#cssmenu ul ul ul li.active a {
    border-left: 1px solid #333
}

#cssmenu > ul > li.has-sub > ul > li.active > a,
#cssmenu > ul ul > li.has-sub > ul > li.active> a {
    border-top: 1px solid #333
}

li > ul {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav id="cssmenu">
<div id="head-mobile"> Le Marche</div>
<div class="button"></div>
<ul>
<li><a href="#">Gioielli</a>
          <ul>
            <li><a href="http://www.orafivenetiassociati.ennestudio.net/annamaria-cammilli/">Annamaria Cammilli</a></li>
            <li><a href="http://www.orafivenetiassociati.ennestudio.net/baraka/">Baraka</a></li>
            <li><a href="http://www.orafivenetiassociati.ennestudio.net/cervera-barcellona/">Cervera Barcelona</a></li>
            <li><a href="http://www.orafivenetiassociati.ennestudio.net/chimento/">Chimento</a></li>
            <li><a href="http://www.orafivenetiassociati.ennestudio.net/comete-gioielli/">Comete Gioielli</a></li> 
            <li><a href="http://www.orafivenetiassociati.ennestudio.net/crivelli/">Crivelli</a></li> 
            <li><a href="http://www.orafivenetiassociati.ennestudio.net/filo-della-vita/">Filo Della Vita</a></li> 
            <li><a href="http://www.orafivenetiassociati.ennestudio.net/fope-2/">Fope</a></li> 
            <li><a href="http://www.orafivenetiassociati.ennestudio.net/giorgio-visconti/">Giorgio Visconti</a></li> 
            <li><a href="http://www.orafivenetiassociati.ennestudio.net/gucci-gioielli/">Gucci</a></li> 
            <li><a href="http://www.orafivenetiassociati.ennestudio.net/le-bebe-gioielli/">le Bebè</a></li> 
            <li><a href="http://www.orafivenetiassociati.ennestudio.net/marco-bicego/">Marco Bicego</a></li>
            <li><a href="http://www.orafivenetiassociati.ennestudio.net/polello/">Polello</a></li> 
            <li><a href="http://www.orafivenetiassociati.ennestudio.net/salvini/">Salvini</a></li>
            <li><a href="http://www.orafivenetiassociati.ennestudio.net/world-diamond-group/">World Diamond Group</a></li>
          </ul>
</li>
<li><a href="#">Bijoux & fashion jewels</a>
   <ul>
     <li><a href="http://www.orafivenetiassociati.ennestudio.net/gucci-argento/">Gucci Argento</a> </li>
     <li><a href="http://www.orafivenetiassociati.ennestudio.net/pandora/">Pandora</a></li>
     <li><a href="http://www.orafivenetiassociati.ennestudio.net/yvone-christa-n-y/">Yvone Christa N.Y.</a></li>
   </ul>
</li>
<li><a href="#">Orologi</a>
      <ul>
       <li><a href="http://www.orafivenetiassociati.ennestudio.net/citizen/">Citizen</a> </li>
       <li><a href="http://www.orafivenetiassociati.ennestudio.net/gucci-time/">Gucci Time</a> </li>
      <li><a href="http://www.orafivenetiassociati.ennestudio.net/tissot/">Tissot</a> </li>
      </ul>
</li>
<li><a href="#">Argenti</a>
      <ul>
      <li><a href="http://www.orafivenetiassociati.ennestudio.net/carlo-moretti/">Carlo Moretti</a> </li>
      <li><a href="http://www.orafivenetiassociati.ennestudio.net/greggio/">Greggio</a> </li>
      <li><a href="http://www.orafivenetiassociati.ennestudio.net/le-bebe/">Le Bebè</a> </li>
      <li><a href="http://www.orafivenetiassociati.ennestudio.net/ottaviani/">Ottaviani</a> </li>
      <li><a href="http://www.orafivenetiassociati.ennestudio.net/sovrani/">Sovrani</a> </li>
	  <li><a href="http://www.orafivenetiassociati.ennestudio.net/venini/">Venini</a> </li>
      
      </ul>
</li>
</ul>
</nav>
</header>
<section style="padding-top:20px;font:bold  44px arial;color:#68D800;">

</section>

我留下所有代码的链接https://jsfiddle.net/1trtbdag/

最佳答案

解决方案 1:使用 last-child 伪类选择器。

li > ul {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}

li:last-child > ul {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
}

更新 fiddle https://jsfiddle.net/1trtbdag/14/

解决方案 2:last-child 和 not 伪类选择器的组合。

li:not(:last-child) > ul {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}

更新 fiddle https://jsfiddle.net/1trtbdag/15/

请注意，这些解决方案将影响文档的所有列表元素。如果您希望它只影响站点菜单，您必须向站点菜单和相应的 css 选择器添加一个 id 或类，例如

ul#menu > li:not(:last-child) > ul。

参见 https://www.w3.org/TR/selectors/#selectors获取 css 选择器的完整列表。

关于html - 以不同方式显示列表的最后一项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36814389/

html - 以不同方式显示列表的最后一项

上一篇：javascript - 为什么 html5lightbox 不适用于 Angular ？

下一篇：javascript - 在 JavaScript/jQuery 中使用按钮单击动态添加 div