内部DIV使外部DIV增长 - 如何避免？

正如您在我以前的文章中可能已经看到的，我正在开发一个用于Web应用程序的Office功能区的HTML实现。内部DIV使外部DIV增长 - 如何避免？

目前色带看起来像这样：

enter image description here

现在，我已经创建了一个下拉菜单，所以当你点击一个下拉菜单中显示的项目，并且看起来像以下：

enter image description here

正如你所看到的项目“新项目”需要时的下拉是不可见的成长空间。我想达到以下效果：

如果显示或不显示“新建项目”菜单项保持相同的宽度。

在HTML中，下拉菜单项是菜单项的一部分。这里的HTML要清楚：

<div class="icon bigicon"> 
    <img src="Resources/Icons/MailNewItemMenu.png" /> 
    <div class="label"> 
     New<br/>Items 
    </div> 
    <div class="menu"> 
     <div class="menucontents"> 
      <ul class="nopadding nomargin"> 
       <li>E-Mail Message</li> 
       <li>Appointment</li> 
       <li>Meeting</li> 
       <li>Contact</li> 
       <li>Task</li> 
       <li>E-Mail Message Using</li> 
       <li>More items</li> 
       <li>Lync Meeting</li> 
      </ul> 
     </div> 
    </div> 
</div>

而CSS如下（我知道这是不是最好的做法，我要去适应一个）：

#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon { text-align: center; display: inline-block; padding-top: 2px; padding-left: 3px; padding-right: 3px; vertical-align: top; } 
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .bigicon { height: 70px; } 
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .smallicon { padding-top: 0px; height: 24px; } 
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon:hover { background-color: #cde6f7; } 
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon:active { background-color: #92C0E0; } 
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon .label { line-height: 16px; } 
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .smallicon { display: inline-block; padding-right: 5px; } 
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .smallicon IMG { vertical-align: middle; } 
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .smallicon .label { display: inline-block; } 
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon .menu { position: relative; top: -1px; left: 1px; box-shadow: 0px 0px 0px #888888;} 
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon .menu .menucontents { padding: 1px; position: relative; z-index: 100; background-color: white; left: -4px; border-top: 1px solid #C6C6C6; border-bottom: 1px solid #C6C6C6; background-image: linear-gradient(#C6C6C6, #C6C6C6), linear-gradient(#C6C6C6, #C6C6C6); background-size:1px 100%; background-position: 0 0, 100% 0; background-repeat: no-repeat; box-shadow: 1px 1px 2px #E0E0E0; } 
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon .menu .menucontents > ul li { text-align: left; list-style: none; margin-left: 1px; margin-right: 1px; padding-left: 5px; padding-right: 5px; } 
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon .menu .menucontents > ul li:hover { background-color: #cde6f7; }

在如果您对该项目感兴趣，请点击这里：https://github.com/Kevin-De-Coninck/OfficeWebControls

这里有一个JsFiddle可以用来检查它。在小提琴中没有显示向下的箭头（不知道为什么），但是如果我用位置绝对和相对的技巧，向下箭头不再显示。

有人可以看看JsFiddle，也许正确吗？在此先感谢：http://jsfiddle.net/Complexity/P5Bnc/3/

亲切的问候，

凯文

来源

2014-03-26 Complexity

你可以做的是设置position:relative的div与icon类。

然后在menu类的div上设置position:absolute。

此外，您可以设置top:80px以更好地定位它。

编辑：

这里是我申请更改您提供的小提琴小提琴：fiddle

来源

2014-03-26 11:12:24 Bobby5193

你好，感谢您的解释，但没有上述解决方案工作。我已经在这里接受了建议，这里是JsFiddle http://jsfiddle.net/Complexity/P5Bnc/ – Complexity

我已经使用修改过的小提琴版本编辑了我的答案。检查出来并告诉我它是否适合你。 – Bobby5193

嘿，那已经是很有前途的东西了。我设法达到相同的目的，但问题是，现在在下拉菜单中的“电子邮件消息”是在2行（第一个条目），我不知道为什么。如果你能为我提供一个解决方案，我会非常感谢:-) – Complexity

由于没有活生生的例子，我只能提供指导：

添加position: relative到.icon或.bigicon
将.icon .menu更改为position:absolute
使用top:100%和适当margin-top修复下拉的定位，因为它现在将完全如果您创建一个孤立的JSFiddle定位

，它会更容易为你的问题具体的解决方案。 :)

来源

2014-03-26 11:11:30

需要设置的位置是：绝对的;和z-index：999;在类= “菜单” 这把你的（DIV CLASS = “菜单”）于前

在这之后，你可以设置（DIV CLASS = “菜单”）的位置，你喜欢（左：20像素;顶：100px;）或任何你想要的

来源

2014-03-26 11:29:12 fahd4007

内部DIV使外部DIV增长 - 如何避免？

回答

相关问题