在 div 中浮动列表的问题答案

【问题标题】：Problems with floating a list inside a div在 div 中浮动列表的问题
【发布时间】：2018-12-31 02:42:19
【问题描述】：

我正在尝试将 ul 浮动到 div 中，但似乎没有任何效果。我错过了什么吗？

我使用 flexbox 有问题吗？我尝试了不同的选择器，例如 .menu ul{} 并给 ul 一个类，但似乎没有任何效果。

我也尝试过去除嵌套在 ul 中的 div 元素，但这并没有解决问题。

尝试将 display: 块分配给菜单 div 以及高度和宽度，但没有做任何事情。

我确定我遗漏了一些明显的东西，但我无法弄清楚。

非常感谢！

$primaryColor: #75beff;
$secondaryColor: #7c3702; 

*{
  box-sizing: border-box;
}

body {
  margin: 0;
  height:100%;
  font-family: 'Roboto', sans-serif;
}

ul {
  list-style: none;
}


.header {
  background: $primaryColor;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 100%;
  overflow: hidden;
}


.menu-list {
 
  float: left;

}
.drop-down{
  visibility: hidden; 
  overflow: hidden;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/main.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

  <title>Ecommerce website</title>
</head>
<body>
    <div class="header">
      <div class="logo"><span class="logo-text">My Fabulous store</span>
      </div>
      <div class="menu">
        <ul class="menu-list">
          <li class="main-categ"><a href="#" class="menu-link">Femei</a></li>
            <div class="drop-down">
              <ul>
                <li class="list-item"><a href="#" class="menu-link">Item 1</a></li>
                <li class="list-item"><a href="#" class="menu-link">Item 2</a></li>
                <li class="list-item"><a href="#" class="menu-link">Item 3</a></li>
              </ul>
            </div>
            <li class="main-categ"><a href="#" class="menu-link">Barbati</a></li>
            <div class="drop-down">
              <ul>
                <li class="list-item"><a href="#" class="menu-link">Item 1</a></li>
                <li class="list-item"><a href="#" class="menu-link">Item 2</a></li>
                <li class="list-item"><a href="#" class="menu-link">Item 3</a></li>
              </ul>
            </div>
            <li class="main-categ"><a href="#" class="menu-link">Copii</a></li>
            <div class="drop-down">
              <ul>
                <li class="list-item"><a href="#" class="menu-link">Item 1</a></li>
                <li class="list-item"><a href="#" class="menu-link">Item 2</a></li>
                <li class="list-item"><a href="#" class="menu-link">Item 3</a></li>
              </ul>
            </div>
            <li class="main-categ"><a href="#" class="menu-link">Altele</a></li>
            <div class="drop-down">
              <ul>
                <li class="list-item"><a href="#" class="menu-link">Item 1</a></li>
                <li class="list-item"><a href="#" class="menu-link">Item 2</a></li>
                <li class="list-item"><a href="#" class="menu-link">Item 3</a></li>
              </ul>
            </div>
        </ul>
      </div>
      <div class="icons">
          <a href="#!">
             <i class="fab fa-twitter fa-2x"></i>
          </a>
          <a href="#!">
              <i class="fab fa-facebook fa-2x"></i>
          </a>
          <a href="#!">
              <i class="fab fa-linkedin fa-2x"></i>
          </a>
      </div>
    </div>
  <div class="main">

  </div>
  <div class="footer">
  </div>
</body>
</html>

【问题讨论】：

你想要达到的结果是什么？
我想从左到右排列列表项
您的项目已经从左到右对齐。但是，如果您不希望菜单列表位于中心，则不应使用space-between（项目分布均匀），而应使用flex-start。您是要在下拉菜单内还是在下拉菜单外对齐 ul？
特别是“main-categ”类的列表项
如果你想从左到右排列项目，那么浮动必须应用于项目本身而不是 ul 父级，你还需要使它的下拉内容框有显示：无；这样它们的边界就不会干扰项目

标签： html css css-float

【解决方案1】：

@K.C. @MarsAndBlack 给出了正确的解决方案：

如果你只想要里面的列表，那么忽略最后一条评论并尝试 .menu-list { display: flex;对齐自我：弹性开始；}

问题在于混合浮动和弹性。

谢谢大家的帮助

【讨论】：