Question

我有一个响应式布局

＆＃13;

<div class='large-2 columns'>
  <div class='menu_item'>
    <p>
      <a href='/example'>Linktext</a>
      <span class='arrow'></span>
    </p>
  </div>
</div>

＆＃13;

span上的箭头类创建一个css三角形箭头（边框宽度：2px 2px 0px技巧）。通常，p具有足够的宽度来显示Linktext和彼此相邻的css三角形箭头。三角形箭头位于p标签右侧的绝对位置。 p内容应该是一行高度（没有换行符）。当我为一些不重要的窗口/屏幕尺寸调整液体布局的大小时，p的宽度小于linktext和它旁边的箭头所需的宽度。在这种情况下，当箭头不适合p标签中链接文本的旁边，从响应布局给出宽度时，我希望箭头隐藏在链接文本后面（如背景白色和例如，更高的z指数）。但是，这个带有background / z索引的解决方案似乎没有用。

编辑重新制定的问题因为它似乎不清楚，删除了令人困惑的小提琴

Answer 1

它的工作原理是将以下内容添加到css（sass） -

a
  background: white
  display: inline-block

并将跨度放在源代码中的a之前

隐藏标签后面的css边框三角形

1 个答案: