Navbar下的面包屑和购物车展示

Question

我想在我的Navbar下添加两个元素。在右侧，您可以通过单击其单击内容和另一侧看到内容的手推车，面包屑都在同一行上对齐。 cf。图片相关

整个过程也将是动态的。我整天都试图找到解决方案而没有成功。最好的方法是什么？弹性显示？

预先感谢您的帮助。这是我的代码：

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.breadcrumbs ul{
    list-style-type: none;
}
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

.flex-container {
  display: flex;
  flex-direction: row;
  font-size: 30px;
  text-align: center;
}

.flex-item-left {
  background-color: #f1f1f1;
  padding: 10px;
  flex: 50%;
}

.flex-item-right {
  background-color: dodgerblue;
  padding: 10px;
  flex: 50%;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

<div class="flex-container">
    <div class="flex-item-left">
        <div class="breadcrumbs">
            <ul>
                <li>
                    <a href="index.php">Home</a>
                </li>
                <li>
                    <a></a>
                </li>
            </ul>
        </div>
    </div>
    <div class="flex-item-right">
        <div class="dropdown">
        <button onclick="myFunction()" class="dropbtn">Cart</button>
        <div id="myDropdown" class="dropdown-content">
            <span>Cart item</span>  
        </div>
        </div>
    </div>
</div>

Answer 1

想到了两种解决方案。

1. 使用保证金：按钮上的左将其推到可用的进一步点。
2. 使用Flex-Grow：1或flex：1在面包板栏上，以便它使用所有可用空间，除了按钮使用的空间。

工作codepen 示例在这里

Answer 2

好吧，您已经做到了，您只需要替换＆lt; span＆gt; span＆lt;/span＆gt;与您的实际项目一样，就您的格式而言，您不需要真正使用Flex由于每个项目都会被块范围div这是您要生成动态内容的要做的事情：

<div class="flex-item-right">
    <div class="dropdown">
    <button onclick="myFunction()" class="dropbtn">Cart</button>
    <div id="myDropdown" class="dropdown-content">
        <?php
            foreach($items as $item) {
        ?>
           <div>
                <?php $item['name'].' '.$item['quantity'].'x'; ?>
           </div>
        <?php
            }
        ?>
    </div>
    </div>
</div>

同样，您可以添加总量，然后在循环结束后转到CART按钮。

更新

我认为我遇到了一个问题，您希望您的购物车按钮走到极右边，让右侧占用整个空间，这是您应该做的：

<div class="flex-container">
    <div class="flex-item-left flex-grow-1">
        ...
    </div>
    <div class="flex-item-right">
        ...
    </div>
</div>

添加``flex-grow'''''''

.flex-grow-1 {
    flex-grow:1;
}

'现有样式：

.flex-item-left {
  background-color: #f1f1f1;
  padding: 10px;
}

.flex-item-right {
  background-color: dodgerblue;
  padding: 10px;
}

更新＆lt; 800px

只需使您的.flex-container blocked scoped，它将自动中心：

@media (max-width: 800px) {
  .flex-container {
    display:block;
   }

工作代码段

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.breadcrumbs ul{
    list-style-type: none;
}
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

.flex-container {
  display: flex;
  flex-direction: row;
  font-size: 30px;
  text-align: center;
}

.flex-item-left {
  background-color: #f1f1f1;
  padding: 10px;
}

.flex-item-right {
  background-color: dodgerblue;
  padding: 10px;
}
.flex-grow-1{
    flex-grow:1;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
  .flex-container {
    display:block;
  }
}

<div class="flex-container">
    <div class="flex-item-left flex-grow-1">
        <div class="breadcrumbs">
            <ul>
                <li>
                    <a href="index.php">Home</a>
                </li>
                <li>
                    <a></a>
                </li>
            </ul>
        </div>
    </div>
    <div class="flex-item-right">
        <div class="dropdown">
        <button onclick="myFunction()" class="dropbtn">Cart</button>
        <div id="myDropdown" class="dropdown-content">
            <span>Cart item</span>  
        </div>
        </div>
    </div>
</div>