修复重叠分区

Question

我在div中有一个div：

<div id="opacnavigation" class="btn-toolbar" role="toolbar">        
    <div id="opacnavigation-btn" class="btn-group">              

        <button type="button" class="btn btn-success ">
            <i class="icon-home"></i>
            Home                    
        </button>

        <button type="button" class="btn btn-success">        
            <i class="icon-comment"></i>
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                About the Library                                         
            </a>            

            <ul class="dropdown-menu" role="menu">
                <li><a href="#" tabindex="-1" role="menuitem">Library Hours</a></li>
                <li><a href="#" role="menuitem">Board of Visitors</a></li>
                <li><a href="#" role="menuitem">Department and Staff</a></li>                    
                <li><a href="#" role="menuitem">Direction Maps</a></li>                    
                <li><a href="#" role="menuitem">Equipment</a></li>
                <li><a href="#" role="menuitem">Floor Plans</a></li>
                <li><a href="#" role="menuitem">Information and Policies</a></li>
                <li><a href="#" role="menuitem">Mission and Vision</a></li>
           </ul>    
        </button>
        <button type="button" class="btn btn-success ">
            <i class="icon-question-sign"></i>   
            Help
        </button>                                       
    </div> 
</div>

第一部：

第二部：

但为什么内部div与第一个div重叠？第二个Div必须在我的第一个div中。这是我的CSS代码：

#opacnavigation{
    background-color: #0C6A13;
    margin: 0;
    border-top:2px solid;
    border-bottom:2px solid;   
}

#opacnavigation-btn{
    background-color: #0C6A13;         
    margin-left: 15px;                 
    width: 100%;   
} 

.btn-group > .btn, 
.btn-group > .btn-group, 
.btn-group > .btn-group > .btn {
    display: block;
    float: none;
    max-width: 92%;
    width: 92%;
    margin-left: 0;
    margin-top: -1px;
    margin-right: 20px;
}

.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
    margin-left: 0px;
}

.btn-group > .btn:first-child:not(:last-child) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-right-radius: 4px;   
}

.btn-group > .btn:first-child{
    margin-left: 0;              
}

非常感谢任何帮助。感谢。

Answer 1

这必须是因为margin-left: 15px;的{​​{1}}。

此div的计算偏移量将是其父div的宽度和给定的边距的相加。

对此的解决方案是为子div提供保证金。

Answer 2

我不确定您正在寻找什么样的解决方案...... 但根据我的理解创建了一个fiddle ..请即兴发挥......

删除width:100%上的#opacnavigation-btn， 用填充替换边距