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

Question

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

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

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

当前的问题只是 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);
}

希望对您有所帮助！

Answer 2

http://codepen.io/anon/pen/meqeeL

我所做的就是添加以下内容 CSS:

ul.menu__inner{
  padding-left:0;
}

ul.menu__inner li a{
  padding-left:40px;
}

这将从父项 ul 中删除填充并将其应用于子项 li a。

此问题是由于父级 ul 包含默认 padding 并将 a link 悬停区域推到右侧。

通过删除 ul 上的填充并将其应用于实际的 link，悬停区域现在扩展到包括填充区域以及 link 本身。

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

Forcing li elements to inherit the full width of their containers

html

css

snap.svg