如何通过所有内联块居中的 li 元素设置连续的框阴影

Question

我正在尝试创建一个响应式布局，所以我将水平CSS菜单居中定位为：

ul {text-align: center;}    
ul li {display: inline-block;}

这样，它在移动设备上保持垂直对齐。

我想添加一个连续的框阴影 -> li 按钮下方的阴影，该阴影将延伸到所有 li 下方，但不会延伸到整个菜单宽度。

问题是当我直接将其设置为：

ul li {box-shadow: 0px 8px 6px -6px yellow;}

阴影在每个按钮（li 元素）下分开。

---

当我将其设置为：

ul {box-shadow: 0px 8px 6px -6px yellow;}

阴影在菜单的整个宽度下，而不仅仅是李家所在的位置

---

如何把它放在 LI 下面，但一直放在所有这些之下？也许是一些包装元素？

此处的示例：http://jsfiddle.net/9B5SV/9/

Answer 1

http://jsfiddle.net/Ft7DP/

<div id="menu"><ul><li>First</li><li>Second</li><li>Third</li></ul></div>

这有点像你在小提琴上的东西。以下是CSS的简化版本，这是使其按照您的要求工作的最低数量：

#menu { text-align: center; }
ul { display: inline-block; box-shadow: 0px 8px 6px -6px yellow; }
li { display: inline-block; }

使整个UL成为内联块，这样它的宽度取决于它的内容，而不仅仅是整个方向。现在，不要将文本对齐：以 UL 为中心，而是将其放在包装 UL 的div 上。然后将框阴影从 LI 移动到 UL 并完成 :)

Answer 2

创建一个包含 li 元素的 span 标记，如下所示：

<ul><span id="licontainer"><li>First</li><li>Second</li><li>Third</li></span></ul>

在 CSS 中：

#licontainer {box-shadow: 0px 8px 6px -6px yellow;};