CSS Dropdown干扰Flexbox

我正在为实践做一个网站，并且遇到了这个奇怪的“bug”（我能想到的最好的词）。我有一个下拉列表，由外部div和两个内部div组成，一个用于圆形用户图标，另一个用于下拉内容，只应在徘徊时显示。这全部包装在topbar标签中。在它下面，我有一个flexbox div，当我在Inspect Element中查看它时，它显示div有一个神秘的右边距，即使我尝试过但未能强制5px的右边距。CSS Dropdown干扰Flexbox

图片：

Dropdown and flexbox

此外，下拉本身是关闭的页面。我希望下拉菜单能够在多个下拉菜单中动态显示，并且下拉菜单的内容会自动显示在图标下方。

图片：

Dropdown when hovered

我试图让所有下拉的div absolute和relitive，其中没有任何解决这些问题，请各位帮忙。

SCSS：

@import 'https://fonts.googleapis.com/css?family=Open+Sans|Roboto:300,400,700'; 
html,body,p,h1,h2,h3,h4,h5,h6,span,div,ul,li,ol,table { 
    margin: 0; 
    padding: 0; 
} 
html { 
    font-family: 'open sans', sans-serif; 
    background-color: #fcfcfc; 
    overflow-x: hidden; 
} 
.bd { 
    &.user { 
    .topbar { 
     background-color: #198ae7; 
     font-family: 'roboto', sans-serif; 
     font-size: 16px; 
     box-shadow: 0px 2px 2px #aaa; 
     padding: 20px; 
     .title { 
     color: #fff; 
     letter-spacing: 0.5px; 
     } 
     .topbar-dropdown { 
     float: right; 
     position: relative; 
     top: -13px; 
     span { 
      cursor: pointer; 
      background-color: #eee; 
      padding: 7px 10px 7px 10px; 
      border-radius: 50%; 
      float: right; 
      i { 
      color: #ccc; 
      } 
     } 
     .topbar-dropdown-content { 
      display: none; 
      position: absolute; 
      background-color: #eee; 
      box-shadow: 0px 2px 2px #aaa; 
      margin-top: 51.5px; 
     } 
     ul { 
      list-style-type: none; 
      li { 
      padding: 15px 40px 15px 40px; 
      text-align: right; 
      &:hover { 
       background-color: #ccc; 
      } 
      } 
      a { 
      color: #555; 
      text-decoration: none; 
      } 
     } 
     &:hover .topbar-dropdown-content { 
      display: block; 
     } 
     &:hover span { 
      border-radius: 50% 50% 0px 0px; 
      padding: 7px 10px 15px 10px; 
     } 
     } 
    } 
    .flexgrid { 
     display: flex; 
     flex-direction: column; 
     margin: 5px 5px 5px 5px; 
     &.flexgrid-vsmall { 
     margin: 0px 4.5px 0px 0px; 
     } 
     &.flexgrid-vlarge { 
     margin: 0px 4.5px 0px 0px; 
     } 
     &.panel { 
     display: block; 
     background-color: #fff; 
     margin: 4px 0px 4px 0px; 
     box-shadow: 0px 2px 2px #aaa; 
     padding: 20px; 
     h2 { 
      font-weight: lighter; 
      font-size: 20px; 
      display: block; 
     } 
     h1 { 
      font-size: 35px; 
     } 
     table { 
      display: block; 
      border: 1px solid #ccc; 
      tr { 
      border-bottom: 1px solid #eee; 
      } 
      td,th { 
      padding: 5px 15px 5px 15px; 
      } 
     } 
     } 
    } 
    } 
}

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>My Checkbook</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="assets/css/mcb.css"> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
    <script type="text/javascript" src="assets/js/app.js"></script> 
    <script src="https://use.fontawesome.com/a46aee1aa2.js"></script> 
    </head> 

    <body class="bd user"> 
     <div class="topbar"> 
      <span class="title">MY CHECKBOOK</span> 
      <div class="topbar-dropdown"> 
      <span><i class="fa fa-user fa-2x"></i></span> 
      <div class="topbar-dropdown-content"> 
       <ul> 
       <a href=""><li>MY ACCOUNT</li></a> 
       <a href=""><li>LOGOUT</li></a> 
       </ul> 
      </div> 
      </div> 
     </div> 
     <div class="flexgrid"> 
      <div class="flexgrid-vsmall"> 
      <div class="flexgrid panel"> 
       <h2>Balance</h2> 
       <h1>$0.00</h1> 
      </div> 
      </div> 
      <div class="flexgrid-vlarge"> 
      <div class="flexgrid panel"> 
       <h2>Transactions</h2> 
       <table> 
       <tr> 
        <th title="The transaction method">CODE</th> 
        <th>DATE</th> 
        <th>DESCRIPTION</th> 
        <th title="Type of transaction">TYPE</th> 
        <th title="Entered on statement">EOS</th> 
        <th title="Is a fee">FEE</th> 
        <th>AMOUNT</th> 
        <th>BALANCE</th> 
       </tr> 
       <tr> 
        <td>1</td> 
        <td>2</td> 
        <td>3</td> 
        <td>4</td> 
        <td>5</td> 
        <td>6</td> 
        <td>7</td> 
        <td>8</td> 
       </tr> 
       </table> 
      </div> 
      </div> 
     </div> 
    </body> 
</html>

来源

2016-10-07 Jacob Jewett

请添加您的js代码... –

在jsfiddle上添加您的适当代码。否则删除你的问题。 – JeetDaloneboy

添加右键属性，并设置为0，隔壁班的

.topbar-dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #eee; 
    box-shadow: 0px 2px 2px #aaa; 
    margin-top: 51.5px; 
    right: 0; 
}

另外添加空格：您丽NOWRAP elmements避免包装里面的文字

li { 
    padding: 15px 40px 15px 40px; 
    text-align: right; 
    white-space: nowrap; 
}

来源

2016-10-07 04:57:15 xzegga

http://codepen.io/anon/pen/rrJmyN – xzegga

CSS Dropdown干扰Flexbox

回答

相关问题