对齐右边的“左三角形”在菜单元素 [英] Align to right "left triangle" in menu element

问题描述

我建立HTML / CSS / JS菜单，并且想要将箭头对准右侧以指向此元素是子菜单。 ▶sign）显示在下一行，而不是当前行...

Chromium显示两种情况都很好。

BTS中有与我的情况类似的错误：

• https://bugzilla.mozilla.org/show_bug.cgi?id=488725

我尝试2策略，这是我的HTML结构：

 < div class =name1> ;子菜单1< span class =sub>▶< / span>< / div> 
< a href =＃>项目1< / a> 
< a href =＃>项目2< / a> 
< div class =name2>子菜单2< / div> 
< a href =＃>项目1< / a> 
< a href =＃>项目2< / a> 
  

这个我的CSS显示问题：

  a，.name1，.name2 {
 display：block; 
 white-space：nowrap; 
} 
 .name1> .sub {
 float：right; 
} 
 .name2：after {
 content：▶; 
 float：right; 
} 
  

JS Fiddle for playground。

我记得我读的代码中 margin-right： 或类似用于背景图片或其他东西，以进行这样的设计，但我不记得究竟如何。

p>

更新我使更完整的示例，HTML：

 < div class =container> 
顶级菜单
< div class =box> 
< div class =name1>超长子菜单1< span class =sub>▶< / span>< / div> 
< a href =＃>项目1 1 1< / a> 
< a href =＃>项目2< / a> 
< div class =name2>超长子菜单2< / div> 
< a href =＃>项目1< / a> 
< a href =＃>项目2< / a> 
< / div> 
< / div> 
  

CSS：

 code> a {border：green 1px dotted; margin：2px; } 
 a，.name1，.name2 {
 display：block; 
 white-space：nowrap; 
} 
 .name1> .sub {
 display：inline-block; 
 float：right; 
} 
 .name2：after {
 content：▶; 
 float：right; 
} 
 
 .container {
 display：inline-block; 
 background：gold; 
 position：relative; 
} 
 .box {display：none; } 
 .container：hover> .box {
 display：block; 
 position：absolute; 
 top：100％; 
} 
  

解决方案

http://jsfiddle.net/m6vU4/1/ =nofollow>解决问题：

 < div class =container> 
顶级菜单（悬停在我上面）
< div class =box> 
< div class =submenu> 
< div class =name>长子菜单1< / div> 
< div class =box> 
< a href =＃>项目1< / a> 
< a href =＃>项目2< / a> 
< / div> 
< / div> 
< a href =＃>项目1 1 1< / a> 
< a href =＃>项目2< / a> 
< div class =submenu> 
< div class =name>超长子菜单2< / div> 
< div class =box> 
< a href =＃>项目1< / a> 
< a href =＃>项目2< / a> 
< a href =＃>项目3< / a> 
< / div> 
< / div> 
< a href =＃>项目1< / a> 
< a href =＃>项目2< / a> 
< / div> 
< / div> 
  

和：

  .container {
 display：inline-block; 
 background：gold; 
 position：relative; 
} 
 .box {display：none; } 
 .container：hover> .box {
 display：block; 
 position：absolute; 
 top：100％; 
} 
 .container .submenu {
 position：relative; 
} 
 .container .submenu：hover> .box {
 display：block; 
 position：absolute; 
 top：0; 
 left：100％; 
} 
 
 a，.name {
 white-space：nowrap; 
 display：block; 
} 
 .name {
 padding-right：1.2em; 
 position：relative; 
} 
 .name：after {
 content：▶; 
 position：absolute; 
 top：0; 
 left：100％; 
 margin-left：-1em; 
} 
  

基本部分是使用三角形元素 和位置：相对并为保留三角形空间padding-right：-1.2em 并通过 margin-left：-1em 将 position：absolute >


I build HTML/CSS/JS menu and want to align arrow to the right to point that this element is submenu.

My problem that in Firefox triangle ("▶" sign) shown on next line instead of current line...

Chromium shown both cases fine.

There are bugs in BTS that similar to my situation:

• https://bugzilla.mozilla.org/show_bug.cgi?id=488725

I try 2 strategy, this my HTML structure:

<div class="name1">Submenu 1<span class="sub">▶</span></div>
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
<div class="name2">Submenu 2</div>
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>

and this my CSS which shown issue:

a, .name1, .name2 {
  display: block;
  white-space: nowrap;
}
.name1 > .sub {
  float: right;
}
.name2:after {
  content: "▶";
  float: right;
}

JS Fiddle for playground.

I remember I read code where margin-right: -16px or similar used with background image or something else to make such design but I can't remember exactly how.

What workaround possible?

UPDATE I make more complete example, HTML:

<div class="container">
  Top level menu
  <div class="box">
    <div class="name1">Very long submenu 1<span class="sub">▶</span></div>
    <a href="#">Item 1 1 1</a>
    <a href="#">Item 2</a>
    <div class="name2">Very long submenu 2</div>
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
  </div>
</div>

CSS:

a { border: green 1px dotted; margin: 2px; }
a, .name1, .name2 {
  display: block;
  white-space: nowrap;
}
.name1 > .sub {
  display: inline-block;
  float: right;
}
.name2:after {
  content: "▶";
  float: right;
}

.container {
    display: inline-block;
    background: gold;
    position: relative;
}
.box { display: none; }
.container:hover > .box {
  display: block;
  position: absolute;
  top: 100%;
}

解决方案

Finally I solve problem:

<div class="container">
  Top level menu (hover on me)
  <div class="box">
    <div class="submenu">
      <div class="name">Long submenu 1</div>
      <div class="box">        
        <a href="#">Item 1</a>
        <a href="#">Item 2</a>
      </div>
    </div>
    <a href="#">Item 1 1 1</a>
    <a href="#">Item 2</a>
    <div class="submenu">
      <div class="name">Very long submenu 2</div>
      <div class="box">        
        <a href="#">Item 1</a>
        <a href="#">Item 2</a>
        <a href="#">Item 3</a>
      </div>
    </div>
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
  </div>
</div>

and:

.container {
    display: inline-block;
    background: gold;
    position: relative;
}
.box { display: none; }
.container:hover > .box {
  display: block;
  position: absolute;
  top: 100%;
}
.container .submenu {
  position: relative;
}
.container .submenu:hover > .box {
  display: block;
  position: absolute;
  top: 0;
  left: 100%;
}

a, .name {
  white-space: nowrap;
  display: block;
}
.name {
  padding-right: 1.2em;
  position: relative;
}
.name:after {
  content: "▶";
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: -1em;
}

Essential part is to make element with triangle as block and position: relative and reserve space for triangle by padding-right: -1.2em and position triangle by position: absolute after element and move back triangle by margin-left: -1em.

这篇关于对齐右边的“左三角形”在菜单元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！