html - 强制 li 元素继承其容器的全宽

Question

我试图强制此示例中的 li/a 元素占据您可以在此处看到的 svg-snap 动画菜单的整个宽度...

http://tympanus.net/Development/ElasticSVGElements/dropdown.html

我最近的尝试在这里...

http://codepen.io/d3wannabe/pen/KdypYL

当前的问题只是 li/a 元素从父元素 ul 的左侧开始缩进 - 这意味着如果您稍微悬停在展开的菜单文本的左侧，您将不会获得悬停效果(即文本不会改变颜色)。

我一直在研究我发现的各种其他帖子(例如 How do I force nested list items to be the same width as parent list item?)的建议，但到目前为止没有任何效果达到预期。

我对原始版本所做的唯一重大更改是将这些行添加到“.menu__inner {”

float:left;
width: 100%;
position: relative;

这至少可以确保 li 元素具有正确的宽度。所以现在我只是想弄清楚什么 css 属性可以让我将元素向左偏移正确的数量 - 非常感谢任何想法!

Answer 1

从 .menu__inner 中删除 float:left; 并添加 1-5px 或任何您认为合适的填充。

您的代码:

.menu__inner {
    list-style: none;
    font-size: 1.3em;
    margin: 0;
    float:left;
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 0;
    -webkit-transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1);
    transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}

修改后的代码:

.menu__inner {
    list-style:none;
    padding-left:5px; /* added a padding */
    font-size: 1.3em;
    margin: 0;
    /* removed float:left */
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 0;
    -webkit-transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1);
    transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}

希望这对您有所帮助!