Question

我正在建立一个练习网站，我遇到了这个奇怪的“错误”（我能想到的最好的词）。我有一个下拉组件，包括一个外部div和两个内部div，一个用于圆形用户人员图标，另一个用于下拉内容，只应在悬停时显示。这全部包含在topbar标记中。在它下面我有一个flexbox div，当我在Inspect Element中查看它时，它显示div有一个神秘的右边距，即使我尝试并且没有强制5px的右边距。

图像：

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>

Answer 1

添加右侧属性并在下一个类

中设置为0

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

另外添加white-space：nowrap到你的文件中以避免在li

中包装文本

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

CSS Dropdown干扰Flexbox

1 个答案: