jquery - 溢出时向水平列表添加箭头

Question

我有一个隐藏了溢出的内联列表，然后当点击显示列表的其余部分时，li 会进入中心。我想在 UL 的左侧和右侧添加箭头，但正在为如何添加而苦苦挣扎。

 <span class="leftarrow"><</span>
  <ul id="tabs">
    <li>Aquaman</li>
    <li>Ares</li>
    <li>Bane</li>
    <li>Captain America</li>
    <li>Black Adam</li>
    <li>Cat Woman</li>
    <li>Cyborg</li>
    <li>Deathstroke</li>
    <li>Doomsday</li>
    <li>Flash</li>
  </ul>
  <span class="rightarrow">></span>

http://codepen.io/jasonflaherty/pen/avrXLL

我在 ul 之前尝试过 content，但我没有得到任何结果。目前，我在 ul 前后都有跨度箭头。

我正在尝试模仿 angularmaterial dynamic tabs以一种简单的方式。

Answer 1

试试这个:

#tabui{
  position:relative;
}

.leftarrow {
  position:absolute;
  left: 0;
  top: 0;
  bottom: 0;
}

.rightarrow {
  position:absolute;
  right: 0;
  top: 0;
  bottom: 0;
}

同时替换 <span>为你的.rightarrow和 .leftarrow类<div>并应用 css 这将使您的箭头放在 #tabui 的两侧