Question

我有一个无序列表，在容器内，我想设置CSS，这样当添加新li时，最后一个li显示，如果容器中没有空格，则最左边的li被隐藏

li1＆gt; LI2

当添加li4时，它应该看起来像

li2＆gt; LI3

基本上我想展示最后2个人的

https://jsfiddle.net/5snmggtg/1/

这个小提琴结果应该是2 3（现在是＃34; 1 2＆＃34;现在）

HTML

<span> <ul > <li>1</li> > <li>2</li> > <li>3</li> </ul> </span>

CSS

li {
   display: inline;
 }

ul{
  position: absolute;
  width: 35px;
  overflow: hidden;
  height: 15px 
 }

Answer 1

有两种解决方案

：一种。使用CSS

＆＃13;

li {
   display: inline;
 }

ul{
  position: absolute;
 
  overflow: hidden;
  height: 15px ;
  padding:0;
 }

 li:not(:last-child):not(:nth-last-child(2)) {display:none}

＆＃13;

<span>
  <ul >
  <li>1 > </li> 
  <li>2  ></li>
  <li>3  ></li> 
  <li>4 ></li> 
   <li>5 </li> 
  </ul>
</span>

＆＃13;

<强> B中。使用下面的jQ 隐藏li:last-child之前的所有元素，但前一个元素除外：）

让我知道这是否是你想要的

请参阅下面的代码段

＆＃13;

var item = $("ul li:last-child")
var sib = $(item).prev()
$(item).prevAll().not(sib).hide()

＆＃13;

li {
   display: inline;
 }

ul{
  position: absolute;
 
  overflow: hidden;
  height: 15px ;
  padding:0;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>
  <ul >
  <li>1 > </li> 
  <li>2  ></li>
  <li>3  ></li> 
  <li>4 ></li> 
   <li>5 </li> 
  </ul>
</span>

＆＃13;

向左滚动元素并显示最右边的元素

1 个答案: