我有一个带有 display:table/table-cell:auto 布局的 ul/li 菜单,拉伸以填充容器并在菜单项之间分配水平空间。我必须将一个额外的 UI 元素与最后一个菜单项对齐。我可以通过将该元素添加为最后一个 li 元素的子元素并使其 100% 宽来实现这一点。
但是,我需要将此 UI 元素(语言选择器)部分定位在主要内容之外,因此我将其定位为相对右侧:-10px。但副作用是,与菜单元素相比,选择器的左边缘向右移动。通常我会将选择器 div 的宽度增加 10px,但因为它是 100%,所以我不能这样做。而父 li 的宽度由其文本内容决定。
有没有办法使用纯 css 来解决这个问题?我不能在选择器上添加填充,因为我需要它的子内容来填充整个 div。
<div class="menu">
<ul>
<li><a href="#">first</a>
</li>
<li><a href="#">second</a>
<div id="selector">
<a href="#">EN</a>
<a href="#">FR</a>
</div>
</li>
</ul>
</div>
这是一个工作示例:http: //jsfiddle.net/hJXng/13/