Html 粘性菜单不在容器内

我已经建立了一个外语词汇表，我使用字母作为垂直的粘滞键或菜单。我已经将垂直键分为两半，左手键字母barL在容器的最左边工作良好。如何使右手键字母barR与左手键字母barR位于同一容器内，但位于右手边

我试着给容器一个固定的宽度，我试着让右手键正确浮动，但两者都不起作用。将右手键设置为right:0的固定位置（显然）会将该键放置在浏览器窗口的右垂直边缘上，这不是所需的

css

html

---

解决方案是在右侧垂直固定字母栏周围添加一个包装，并为其提供以下样式：

.wrapper { width: 25px; float: right; }

将包装器向右浮动会将包装器及其包含的（右侧）条推到包装器容器的右侧内边缘。包装的25px宽度与它包含的条的宽度匹配。codepen演示已更新以反映这一点。

您能做一个演示吗？下面是codepen中的演示：

<div class="alphabet-barL">
   <a href="#A" class="alphasquare" title="Go to this letter">A</a>   
   <a href="#B" class="alphasquare" title="Go to this letter">B</a> 
   <a href="#C" class="alphasquare" title="Go to this letter">C</a> 
   <a href="#D" class="alphasquare" title="Go to this letter">D</a>
   <a href="#E" class="alphasquare" title="Go to this letter">E</a> 
   <a href="#G" class="alphasquare" title="Go to this letter">G</a> 
   <a href="#H" class="alphasquare" title="Go to this letter">H</a> 
   <a href="#I" class="alphasquare" title="Go to this letter">I</a> 
   <a href="#J" class="alphasquare" title="Go to this letter">J</a>
   <a href="#K" class="alphasquare" title="Go to this letter">K</a> 
   <a href="#L" class="alphasquare" title="Go to this letter">L</a>
   </div>

   <div class="alphabet-barR">
   <a href="#M" class="alphasquare" title="Go to this letter">M</a> 
   <a href="#N" class="alphasquare" title="Go to this letter">N</a> 
   <a href="#O" class="alphasquare" title="Go to this letter">O</a>
   <a href="#P" class="alphasquare" title="Go to this letter">P</a> 
   <a href="#R" class="alphasquare" title="Go to this letter">R</a> 
   <a href="#S" class="alphasquare" title="Go to this letter">S</a> 
   <a href="#T" class="alphasquare" title="Go to this letter">T</a> 
   <a href="#U" class="alphasquare" title="Go to this letter">U</a>
   <a href="#V" class="alphasquare" title="Go to this letter">V</a>
   <a href="#Y" class="alphasquare" title="Go to this letter">Y</a>
   </div>

.wrapper { width: 25px; float: right; }