Блог

Главная - Вопросы по программированию - Выпадающий список CSS мешает работе Flexbox

Выпадающий список CSS мешает работе Flexbox

#html #css #sass #flexbox

#HTML #css #sass #flexbox

Вопрос:

Я создаю сайт для практики, и я столкнулся с этой странной «ошибкой» (лучшее слово, которое я мог придумать). У меня есть выпадающий список, состоящий из внешнего div и двух внутренних div, один для кругового значка пользователя и один для выпадающего содержимого, которое должно отображаться только при наведении курсора. Все это завернуто в topbar тег. Под ним у меня есть div flexbox, и когда я просматриваю его в Inspect Element, он показывает, что div имеет загадочное правое поле, хотя я пытался и не смог принудительно использовать поле справа от 5px .

Изображение:

Выпадающий список и flexbox

Кроме того, сам выпадающий список находится за пределами страницы. Я хочу, чтобы выпадающий список был динамичным в том смысле, что у меня может быть несколько выпадающих списков, а содержимое выпадающего списка автоматически отображается под значком.

Изображение:

Выпадающий список при наведении курсора

Я попытался создать все выпадающие разделы 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 {
  amp;.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;
            amp;:hover {
              background-color: #ccc;
            }
          }
          a {
            color: #555;
            text-decoration: none;
          }
        }
        amp;:hover .topbar-dropdown-content {
          display: block;
        }
        amp;:hover span {
          border-radius: 50% 50% 0px 0px;
          padding: 7px 10px 15px 10px;
        }
      }
    }
    .flexgrid {
      display: flex;
      flex-direction: column;
      margin: 5px 5px 5px 5px;
      amp;.flexgrid-vsmall {
        margin: 0px 4.5px 0px 0px;
      }
      amp;.flexgrid-vlarge {
        margin: 0px 4.5px 0px 0px;
      }
      amp;.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>

Комментарии:

1. Пожалуйста, добавьте свой js-код…

2. добавьте сюда свой правильный код из jsfiddle. иначе удалите свой вопрос.

Ответ №1:

Добавьте нужное свойство и установите значение 0 в следующем классе

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

Дополнительно добавьте пробел: nowrap к элементам li, чтобы избежать переноса текста внутри li

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