个人中心
gpt4 book ai didi

html - 无法使水平滚动菜单在 HTML 中工作

转载 作者：行者123 更新时间：2023-11-28 01:02:11 25 4
gpt4 key购买 nike

我目前正在努力实现这样的目标

enter image description here

但我无法让我的元素水平排列。

enter image description here

我已经尝试了很多东西，比如你设置 child 显示的空白方法:内联 block 但无济于事，这是我最近尝试使用 flex 的代码。

* {
  /* margin: 0;
  padding: 0;
  top:0; */
  box-sizing: border-box;
}

body {
  background: black;
}

.logo div {
  height: 55%;
  background: #C40514;
}

.logo div img {
  height: 90%;
  margin-left: 10%;
  margin-top: 0.625%;
}

#mainNav {
  position: sticky;
  top: 0;
  z-index: 1;
}

#mainNav a {
  color: white;
  background: #C40514;
  display: block;
  height: 55%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: "Akzidenz-Grotesk BQ", sans-serif;
  font-weight: bold;
  transition: background 0.4s;
}

#mainNav a:hover {
  background: black;
  color: white;
}

#mainNav ul {
  list-style: none;
  display: flex;
}

#mainNav li {
  width: 100%;
  text-align: center;
  position: relative;
}

#mainNav li:hover .subMenu>li {
  display: block;
  top: 0px;
}

.subMenu li {
  display: none;
  position: absolute;
  top: 0px;
  background-color: #C40514;
  color: white;
  text-align: right;
}

.subMenu li a {
  text-align: right;
  margin-top: 2%;
}

.subMenu {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 200%;
  margin-top: 80.5%;
}

.menuTitle {
  display: flex;
  width: 100%;
  height: 100%;
  background: white;
  margin-top: -6%;
  text-align: center;
}

.menuTitle p {
  margin-left: 15%;
  text-decoration: none;
  font-family: "Akzidenz-Grotesk BQ", sans-serif;
  font-size: 150%;
  font-weight: bold;
}

.itemImage {
  width: 80%;
  height: 80%;
  object-fit: contain;
  object-position: left;
  padding-top: 4%;
  padding-left: 2%;
  float: left;
  position: absolute;
  left: 0;
}

.itemName {
  color: red;
  text-decoration: none;
  font-family: "Akzidenz-Grotesk BQ", sans-serif;
  font-size: 150%;
  font-weight: bold;
  margin-left: 40%;
  margin-top: 4%;
}

.itemPrice {
  color: black;
  text-decoration: none;
  font-family: "Akzidenz-Grotesk BQ", sans-serif;
  font-size: 110%;
  margin-left: 41%;
  margin-top: 15%;
  position: absolute;
  bottom: 25%;
}

.singleItem {
  width: 48%;
  background-color: #e0dede;
  border: 1px solid red;
  height: 150px;
  position: relative;
}

.rowItem {
  display: flex;
  justify-content: space-between;
  padding-bottom: 2%;
  height: 150px;
  margin-top: 1%;
}

.listItems {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  width: 75%;
  /* margin-top: 130px ; */
}

.orderButtonDiv {
  display: inline;
  border: 2px solid red;
  position: relative;
  right: -50%;
  margin-top: 15%;
}

.orderButtonDiv a {
  text-decoration: none;
  color: red;
  width: 100%;
  height: 100%;
  font-family: "Akzidenz-Grotesk BQ", sans-serif;
  font-size: 90%;
  font-weight: bold;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.footer {
  display: flex;
  position: relative;
  bottom: 0;
  width: 100%;
  text-align: center;
  justify-content: center;
  flex-direction: row;
  margin-bottom: 10px;
}

.footer div a {
  color: white;
  text-decoration: none;
  font-family: "Akzidenz-Grotesk BQ", sans-serif;
  font-size: 80%;
}

.footer div {
  margin-right: 10px;
}

.footer div a:hover {
  text-decoration: underline;
}

.social_media {
  display: flex;
  position: relative;
  bottom: 0;
  text-align: center;
  justify-content: center;
  flex-direction: row;
  margin-bottom: 1%;
  margin-top: 3%;
}

.social_media div {
  margin-right: 30px;
}

.social_media div a {
  color: white;
}

.social_media div a:hover {
  color: yellow;
}

.purchaseWrapper {
  height: 2rem;
  background-color: white;
}

.drinkDisplay {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  /* Vertical alignment */
  overflow-x: auto;
  width: 100%;
  height: 100%;
}

.itemy {
  flex: 1 0 25%;
  /* Adjusted. Do not allow the items to shrink */
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="newstyle.css">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

  <nav id="mainNav">

    <ul>
      <div class="logo">
        <div><img src="Logos/logo.png" alt="dog"></div>
      </div>
      <li><a href="#">Menu</a>
        <ul class="subMenu">
          <li><a href="menu.php?category=Burgers"> Burgers</a></li>
          <li><a href="menu.php?category=Chicken and Platter">Chicken and Platter</a></li>
          <li><a href="menu.php?category=Spicy Chicken Mcdo">Spicy Chicken McDo</a></li>
          <li><a href="menu.php?category=McSaver Meals">McSaver Meals</a></li>
          <li><a href="menu.php?category=Breakfast">Breakfast</a></li>
          <li><a href="menu.php?category=Fries 'N McFloat Combos">Fries 'N McFloat Combos</a></li>
          <li><a href="menu.php?category=Desserts">Desserts</a></li>
          <li><a href="menu.php?category=A la carte">A la carte</a></li>
          <li><a href="menu.php?category=Add Ons">Add Ons</a></li>
          <li><a href="menu.php?category=Drinks">Drinks</a></li>
        </ul>
      </li>

      <li><a href="#">My Bag</a></li>
      <li><a href="#">My Favorites</a></li>
      <li><a href="#">Order Tracker</a></li>
      <li><a href="#">My Account</a></li>
      <li>
        <a href="logout.php">
          <?php
                session_start();
                if(isset($_SESSION['username'])){
                  $name = $_SESSION['username'];
                  $name = strtoupper($name);
                  echo $name;
                }
                else {
                  echo "Login";
                }
              ?>
        </a>
      </li>


    </ul>
  </nav>



  <div class="purchaseWrapper">
    <!-- <img src="<?php echo $arr3 ?>" alt="item Image">
        <div class="nameDiv"><p><?php echo $arr1 ?></p></div>
        <div class="priceDiv"><p><?php echo $arr2 ?></p></div> -->

    <div class="drinkDisplay">
      <div class="itemy"> Menu1</div>
      <div class="itemy"> Menu2</div>
      <div class="itemy"> Menu3</div>
      <div class="itemy"> Menu4</div>
      <div class="itemy"> Menu5</div>
      <div class="itemy"> Menu6</div>
      <div class="itemy"> Menu7</div>
      <div class="itemy"> Menu8</div>
    </div>

  </div>



  <div class="social_media">
    <div><a target="_blank" rel="noopener" href="https://www.facebook.com/McDo.ph/"><i class="fa fa-facebook-official fa-3x" aria-hidden="true"></i></a></div>
    <div><a target="_blank" rel="noopener" href="https://instagram.com/mcdo_ph/?hl=en"><i class="fa fa-instagram fa-3x"></i></a></div>
    <div><a target="_blank" rel="noopener" href="https://twitter.com/mcdo_ph"><i class="fa fa-twitter fa-3x" aria-hidden="true"></i></a></div>
  </div>


  <div class="footer">
    <div><a href="">ABOUT</a></div>
    <div><a href="">CHARITY</a></div>
    <div><a href="">CAREERS</a></div>
    <div><a href="">PRESS CENTRE</a></div>
    <div><a href="">GALLERY</a></div>
    <div><a href="">BUSINESS OPPORTUNITY</a></div>
    <div><a href="">CUSTOMER CARE</a></div>
    <div><a href="">NEWSLETTER</a></div>
    <div><a href="">TERMS AND CONDITION</a></div>
    <div><a href="">PRIVACY POLICY</a></div>
  </div>




</body>

</html>

谢谢!

我更喜欢仅在 html 和 css 中使用它，但我对其他方式持开放态度:)

编辑:

浏览器 (chrome) 有问题，我尝试使用 Microsoft edge，它在那里工作正常。但我很确定 flex 可以在 chrome 上运行，甚至页面中的元素都使用 flex，并且它们显示正常。

最佳答案

我只在我的帖子中包含了相关的 CSS，并记录了 CSS 的变化。希望这会有所帮助。

* {
  /* margin: 0;
  padding: 0;
  top: 0; Do never position all elements at top */ 
  box-sizing: border-box;
}

body {
  background: black;
}

.purchaseWrapper {
  /* height: 150%; It takes 150% of the parent, which is not set */
  height: 2rem; /* Added */
  background: white;
  /* margin-top: -3%; Removed */
}

.drinkDisplay {
  display: flex;
  flex-wrap: nowrap;
  align-items: center; /* Vertical alignment */
  overflow-x: auto;
  width: 100%;
  height: 100%;
}

.itemy {
  flex: 1 0 25%; /* Adjusted. Do not allow the items to shrink */
}
<div class="purchaseWrapper">
  <div class="drinkDisplay">
    <div class="itemy"> Menu1</div>
    <div class="itemy"> Menu2</div>
    <div class="itemy"> Menu3</div>
    <div class="itemy"> Menu4</div>
    <div class="itemy"> Menu5</div>
    <div class="itemy"> Menu6</div>
    <div class="itemy"> Menu7</div>
    <div class="itemy"> Menu8</div>
  </div>
</div>

关于html - 无法使水平滚动菜单在 HTML 中工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52579221/

25 4 0
文章推荐： html - 使 div in div in div 可滚动并溢出
文章推荐： c++ - Visual C++、std 和 getline(ifstream, string)、EOF 在 std 堆栈内抛出和中断，这正常吗？
文章推荐： Javascript - chatjs donut 在悬停时运行脚本
文章推荐： c++ - C++程序类中的cout
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com