“拉头发”并排浮动 div答案

【问题标题】："hair pulling" side-by-side floating div's“拉头发”并排浮动 div
【发布时间】：2012-06-07 20:45:03
【问题描述】：

我有一个简单的水平导航菜单，它使用高度风格的锚点作为按钮。现在，最后一个名为“store”的按钮有一个内容列表，通过这个 jquery 悬停效果变得可见。

我无法让“存储”按钮与其他按钮对齐。现在两天我正在尝试float:leftmargin 50% whatever、position:incorrect、overflow:I-forget-what、clear:both，以及各种俗气的黑客，我正处于 CSS 定位的那个点，你开始认真考虑重新构建使用表格的布局。

与其把我的灵魂卖给桌子，我想我最好还是请有经验的人看看：

http://www.ideagasms.net/ideagasms-with-dropdown-menu.html

查看源代码时，您会注意到我在主要元素旁边添加了许多 cmets，因此应该很容易快速理解所有内容。谢谢你。 :)

【问题讨论】：

它应该是什么样子的？
您想要#ig 按钮旁边的store 按钮吗？
在将代码发布到此处之前，将您的代码简化为问题的最低限度，帮助我们帮助您...
使用浮动：在 a.navmenu、button.navmenu 和 #buttonnav 上左移
使用 li 包装所有顶级菜单项。

标签： css position html

【解决方案1】：

这段代码应该可以工作：

我已在您的菜单中添加了一个固定宽度的包装 div，并将其居中放置在页面上。然后将每个标签添加到一个li中。

您的 jQuery 菜单现在已损坏，但现在 dom 中的订单已更改，这应该只是再次找到正确元素的情况。

您可能还需要创建一些新样式并将它们再次添加到元素中。因为我可能搞砸了一些。我建议添加适当的类和 id，这样您以后就不会遇到样式问题。

<div id="nav">
 <ul>
  <li>
      <a alt="STORE" class="navmenu faded" href="http://www.ideagasms.net/ideagasms-products/">STORE</a>
    <ul class="file_menu">
      <li><a href="#file">File</a></li>
      <li><a href="#edit">Edit</a></li>
      <li><a href="#view">View</a></li>
      <li><a href="#insert">Insert</a></li>
      <li><a href="#modify">Modify</a></li>
      <li><a href="#control">Control</a></li>
      <li><a href="#debug">Debug</a></li>
      <li><a href="#window">Window</a></li>
      <li><a href="#help">Help</a></li>
    </ul>
  </li>
  <li><a alt="HOME" class="navmenu faded" href="http://www.ideagasms.net/link">HOME</a>     </li>
  <li><a alt="VIDEO" class="navmenu faded" href="http://www.ideagasms.net/link">VIDEO</a> </li>
  <li><a alt="ABOUT" class="navmenu faded" href="http://www.ideagasms.net/link">ABOUT</a></li>
  <li><a alt="CONTACT" class="smcf-link navmenu faded">CONTACT</a></li>
  <li><a alt="DONATIONS" class="navmenu scroll faded" href="http://www.ideagasms.net/link">DONATIONS</a></li>
  <li><a alt="MENTORING" class="navmenu faded" href="http://www.ideagasms.net/link">MENTORING</a></li>
  <li><a alt="BEAUTY" class="navmenu faded" href="http://www.ideagasms.net/link">BEAUTY</a></li>
  <li><a alt="SNIPPETS" class="navmenu scroll faded" style="letter-spacing:1px" href="http://www.ideagasms.net/link">#iG</a></li>
</ul>
</div>


<style type="text/css"> 


#buttonnav {  
float:left;
height: 25px;
width: 100px;
margin-bottom:1cm;
position:relative;
z-index:9; 
}
#nav {
  margin: auto;
  width: 740px;
  background: orange;
}
ul {
  margin: auto;
}
ul li {     
    display: inline;
    float: left;

}

.menu_class {
    border:1px solid #1c1c1c;
}

ul.file_menu {
    cursor:pointer;
    display:none;
    width:260px;
    border: 1px solid #1c1c1c;
    margin:0; 
    padding:0; 
    list-style:none;
}

.file_menu li {
    background-color: #302f2f;
}

.file_menu li a {
    color:#FFFFFF; 
    text-decoration:none; 
    padding:10px; 
    display:block;
}

.file_menu li a:hover {
    padding:10px;
    font-weight:bold;
    color: #F00880;
}

</style>

【讨论】：

这种方法+1。我的 2 美分 - 事情比需要的更难，因为 HTML 有点不稳定。 Gr3mlin 的方法不仅看起来更好，而且可能会让你更轻松地做你想做的事。

【解决方案2】：

那个菜单看起来很糟糕，说实话，并没有你注意到的那样灵活。

如果我是你，我会以适当的 html 结构与（嵌套的）li 结构一起使用的方式重建它，这样你就可以加入那个额外的项目和子菜单......

这是一个丑陋的修复

#buttonnav {
    display: inline-block;
    /* remove the float & widht */
}

.hoverli ul.file-menu {
    position:absolute;
}

在这种情况下，您可能应该回到基础知识并重新学习如何制作合适的菜单。如果这是在某些内容管理系统中，则覆盖类和模板以使其易于添加...

子菜单我缺少的东西也是position: absolute;（您可能希望子菜单的父级是相对的）。

【讨论】：

【解决方案3】：

您需要修复两件事才能正确显示按钮并使子菜单正常运行：

看到这个working Fiddle Example！

1)

为按钮设置css，如：

#buttonnav {
    display: inline-block;
    height: 25px;
    position: relative;
    z-index: 9;
}

注意：display:inline-block; 进入，float、margin 和 width 退出。

2)

调整子菜单的css，让它在不破坏布局的情况下出现：

CSS

.hoverli {
    position: relative;
    z-index: 1;
}
.hoverli ul {
    position:absolute;
}

【讨论】：