Question

几天前，我发现了自己以前从未想过的东西，但是继续研究解决它。

我有一个菜单，在里面，我有它的物品。我希望这些项目能够填充其父级的整个宽度;我发现了一些解决方案，包括这些解决方案（我个人认为这是最简单的解决方案，并且不使用任何黑客来完成这项工作）：

HTML

<div id="menu">
    <a href="#"><div class="menu_item">Item 1</div></a>
    <a href="#"><div class="menu_item">Item 2</div></a>
    <a href="#"><div class="menu_item">Item 3</div></a>
</div>

CSS

div#menu {
    display:flex;
    justify-content:space-between;
}
div.menu_item {
    white-space:nowrap;
}

在我发现它的地方，JSFiddle甚至还有一个有效的例子。我创建了一个新的空白文档，并在那里尝试了，并且工作了。但是，不幸的是，这根本不适用于我已经完整的网站。我认为很多事情：我的标签是继承属性，以前的属性之间可能存在冲突，还有更多。我对它们进行了全部测试，但仍然没有。我还没有做过的唯一事情就是从头开始（显而易见的原因）。

所以，我的问题是，你知道可能发生什么吗？什么都没有？

PS：我已经在我的电脑上尝试了所有这些，但该网站已经在线。如果你想查看它：http://geesufmg.com（只是要清楚，我在这里尝试这是按钮＆＃34; Home＆＃34;，＆＃34; Engenharia de sistemas＆＃34; ，＆＃34; Sobre o curso＆＃34;等等 - 容器是div＃menu，item是div.menu_item。

从现在开始，感谢您的帮助。

Answer 1

这仍然有效，您只需将其添加到a标记的父级，即实际代码中的div.container，而不是div#menu：

div.container{
  display:flex;
  justify-content:space-between;
}

div.menu_item {
   white-space:nowrap;
}

<强>更新

在进一步检查您的代码时，问题是您在多个地方使用.container（这很好，因为它是class但是添加这些属性会影响其他地方）。您需要在特定标识符（在本例中为.container）下定位#menu：

#menu .container{
   display:flex;
   justify-content:space-between;    
}

#menu .container a{
   white-space:nowrap;
}

FIDDLE

均匀分离的DIV技术不起作用

1 个答案: