时间戳

首页 > 解决方案 > 如何在导航栏中在css中制作全高并在一行中显示四张卡片

html - 如何在导航栏中在css中制作全高并在一行中显示四张卡片

问题描述

您可以在下面的链接中看到CSS 导航栏不是全高，我尝试解决但无法正常工作，您还可以看到我想要在 dektop 视图中的一行中有四个图像

    <nav>
    <ul>
      <h1>Filters</h1>
    <p>Launch Year</p>
        <div class="w3-show-inline-block">
  <div class="w3-bar">
    <button class="w3-btn w3-teal"  onClick={() => this._filterByYear('2006')}>2006</button>
    <button class="w3-btn w3-teal"  onClick={() => this._filterByYear('2007')}>2007</button>
  </div>
  </div>
  <div class="w3-show-inline-block">
  <div class="w3-bar">
    <button class="w3-btn w3-teal"  onClick={() => this._filterByYear('2008')}>2008</button>
    <button class="w3-btn w3-teal"  onClick={() => this._filterByYear('2009')}>2009</button>
  </div>
  </div>
    </ul>
  </nav>

我想像这样创建和风格https://ibb.co/rFD6knk

演示

标签： htmlcss

解决方案

但是这个用于导航栏的 CSS

{
   height: calc(100vh - x)
}

其中 x 是您作为标题高度放置的任何内容

推荐阅读