Question

我正在开发一个带有下拉菜单的小网站，仅使用HTML / CSS。这本身就可以。我曾经使用TD，但是嘿，DIVS规则，所以现在使用DIV。

我使用topmenu。在左侧，有许多菜单项，菜单的权限手侧也是如此。到目前为止一切都很好由于只有两个div，一个浮动左边，一个浮动右边，两个都有相同的CSS应用在宽度为100％的包含div中，它看起来像一个大的菜单栏。

如果我想在同一菜单栏上的屏幕中间完全添加一个小徽标，就会出现问题。由于左右菜单选项列表的宽度不完全相同（右侧菜单项列表略短），因此中间的徽标向右倾斜。

更糟糕的是，菜单选项列表是动态的，具体取决于您所在的页面以及您登录的位置。

我想要实现的目标是：

菜单栏上有3个部分：右侧菜单，中间徽标，左侧菜单
中间徽标必须始终位于屏幕的正中央
调整浏览器窗口大小时，左侧＆amp;右侧部分自动调整大小以适应屏幕
中间徽标是固定宽度
调整大小时，左右菜单只能调整到最右边或右边菜单选项列表所需的宽度
当然，没有包装！

我一直在努力但却失败了，主要是因为我的知识不足。我prewfer只使用HTML / CSS而不是JS / jquery

我尝试在容器div的css中使用backgorund图像，但是当调整大小时，菜单选项最终会流过中间日志。

这是下拉菜单的CSS（从网上获取，而不是我的代码）

.navbarl {
  overflow: hidden;
  background-color: #333;
  }

.navbarl a {
  float: left;
  font-size: 12px;
  color: white;
  text-align: center;
  padding: 8px 10px;
  text-decoration: none;
  font-weight: normal;
  }

.dropdown {
  float: left;
  overflow: hidden;
  }

.dropdown .dropbtn {
  font-size: 12px;    
  border: none;
  outline: none;
  color: white;
  padding: 8px 10px;
  background-color: #333;
  font-family: inherit;
  margin: 0;
  }

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #FFCC00;
  }

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

.dropdown-content a {
  float: none;
  color: black;
  padding: 8px 10px;
  text-decoration: none;
  display: block;
  text-align: left;
  }

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

.dropdown:hover .dropdown-content {
  display: block;
  }

HTML通常看起来像这样：

<div class="navbarl">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div> 
</div>

我当然为我的网站更改了这个，并在菜单栏的右侧菜单中添加了第二个块。

这就是我现在拥有的完整菜单栏。我知道表格不适合格式化，但我尝试了很多不同的东西，这是我上一次尝试的副本。正如我所说，我仍然是div的新手并且学会摆脱它们： - ）

<table class=menu>
  <tr>
    <td class="menu_left">
      <div class="navbarl">
        <a href="/index.php">Home</a>
        <a href="/somesubfolder/index.php">Menu option 2 wih a long name</a>
        <div class="dropdown">
          <button class="dropbtn">Cursus&#9660;</button>
          <div class="dropdown-content">
            <a href="/somesubfolder/a.php">Be</a>
            <a href="/somesubfolder/b.php">One</a>
          </div>[![enter image description here][1]][1]
        </div>
        <a href="/misc/login.php">Login</a>
      </div>
    </td>
    <td class="menu_middle">
      <a href="http://www.budgetbytes.nl"><img class="menu_sponsor" src="/images/sponsor.png" alt=""/></a>
    </td>
    <td class="menu_right">
      <div class="navbarl">
        <a href="/misc/nieuws.php">Nieuws</a>
      </div>
    </td>
  </tr>
</table>

这是一个例子（徽标我隐形，不需要在这里商业化，它是我们的赞助商标志）。你可以看到它的倾斜

Answer 1

这是flexbox非常方便的地方。我建议你不要使用table进行布局，因为它会被错误地使用，就像float仅用于将图像放在文本旁边一样。

我已经快速，简单地说明了如何使用flexbox创建导航菜单。当然，您需要以较小的视口宽度创建移动菜单。

<强> HTML

<header role="navigation">
    <div class="nav menu nav1">
        <a href="#" tabindex="0" class="menu-item">Home</a>
        <a href="#" tabindex="0" class="menu-item">News</a>
        <div class="menu-dropdown menu-item">
            <p tabindex="0">Dropdown</p>
            <a href="#" tabindex="0">Link 1</a>
            <a href="#" tabindex="0">Link 2</a>
            <a href="#" tabindex="0">Link 3</a>
        </div>
    </div>
    <div class="menu logo">
        <a href="#" tabindex="0" title="Click to go to homepage">
            <img src="http://media.gettyimages.com/photos/blue-eyed-husky-puppy-picture-id178375154?s=170x170&w=1007" alt="Husky puppy">
        </a>
    </div>
    <div class="nav menu nav2">
        <a href="#" tabindex="0" class="menu-item">About</a>
        <a href="#" tabindex="0" class="menu-item">Contact</a>
    </div>
</header>

CSS（scss）

header {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;

    .nav {
        width: 42.5%;
    }

    .logo {
        width: 15%;
    }

    .menu {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;

        .menu-dropdown {
            height: 20px;
            margin-bottom: -5px;

            p {
                cursor: pointer;
                margin: 0;

                &:focus, &:hover {
                    ~ a {
                        display: block;
                    }
                }
            }

            a {
                display: none;
            }

            &:focus, &:hover {
                height: 70px;
                margin-bottom: -55px;

                a {
                    display: block;
                }
            }
        }

        img {
            width: 100px;
        }
    }
}

示例

https://codepen.io/anon/pen/vjXaVW

<强>解释

Flexbox是一种CSS布局技术，它使用浏览器的CSS引擎来动态排列元素。 <{1}}不需要手动分配宽度，而是为我们带来了沉重的负担。

Learn More about Flexbox

flexbox

使用.some-random-class { align-items: center; // I'm telling the element to arrange its children to be vertically centered display: flex; // Declaring that this element will be using flexbox; it's like flipping the "Flexbox Switch" to on. flex-wrap: nowrap; // I'm telling the element to never allow its children to wrap (i.e. fold over). Using "wrap" instead of "nowrap" tells the element to definitely allow its children to wrap (i.e. fold over) justify-content: center; // I'm telling the element to horizontally center its children. There are more options than just "center" }，菜单和徽标将始终以页面为中心。请注意，justify-content: center;元素位于其他两个<div class='menu logo'></div>元素之间，而另外两个div元素包含菜单项。

HTML / CSS - 如何将中间div中心区分为三个，独立于周围的div

1 个答案: