如何通过所有以内联块为中心的li元素设置连续的box-shadow

Question

我正在尝试创建一个响应式布局，因此我将一个水平CSS菜单放在中心位置：

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

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

我想添加一个连续的盒子阴影 - ＆gt; li按钮下方的阴影，在所有li 下伸展，但不是完整的菜单宽度。

问题在于我将其直接设置为：

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

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

---

当我将其设置为：

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

阴影位于菜单的整个宽度之下，而不仅仅是Li的位置

---

如何将它置于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;};