html - 强制内联 block 导航栏和列表

标签 html css

我正在尝试创建一个多级导航栏，如下所示。

在顶部导航栏上，我将其划分为 3 个 div。左边的 div 用于汉堡包按钮和模块名称，中间的 div 包含品牌 Logo ，右边的 div 包含用户配置文件。我使用内联 block 显示它。我的第一个问题是，我可以在另一个内联 block 中创建内联 block div 吗？由于右侧 div 中的个人资料将包含个人资料图片、姓名和 V 形图标。我尝试使用内联 block ，但它们一直在另一个 div 下移动。

在第二个导航栏上，我使用水平列表。在大屏幕上看起来不错，但在小屏幕上当容器无法容纳列表时，一些菜单会向下移动。我想让它隐藏不适合屏幕的列表子项，并且可以通过水平滚动看到。如果滚动条不可见则更好。我尝试使用 overflow-x: scroll 但它不起作用。

我真的是这方面的新手，所以请耐心回答这个(显然)基本问题。任何帮助表示赞赏~!

.navbar {
  display: block; 
  width: 100%;
}

.navbar-top {
  width: 100%;
  height: 60px;
  box-shadow: 0px 1px 6px 0 rgba(0,0,0,0.1);
  display: block;
  line-height: 0;
}

.navbar-top-left {
  width: 24%;
  display: inline-block;
  line-height: 0;
  vertical-align: top;
  float: left;
}

.burger-btn-wrapper {
  height: 60px;
  width: 60px;
  display: inline-block;
  text-align: center;
}

.burger-btn-wrapper i {
  font-size: 16px; 
  color: #333;
  line-height: 60px;
}

.module-name {
  height: 60px;
  line-height: 60px;
  text-transform: uppercase;
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #333;
}

.navbar-top-right {
  width: 25%;
  display: inline-block;
  height: 60px;
  margin-right: 0;
  vertical-align: top;
  line-height: 0;
  float: right;
}

.navbar-top-middle {
  width: 50%;
  display: inline-block;
  height: 60px;
  text-align: center;
  position: relative;
  line-height: 0;
}

.modules-icon {
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

.modules-icon i {
  font-size: 16px; 
  color: #333;
}

.navbar-profile {
  display: inline-block;
  height: 60px;
  line-height: 0;
}

.profpic-wrapper {
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 0;
}

.navbar-profpic {
  width: 40px;
  height: 40px;
  background-color: #00c983;
  border-radius: 40px;
  position: relative;
  margin-left: 10px;
  margin-top: 10px;
}

.profile-initial {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

.profile-name {
  display: inline-block;
  font-size: 13px;
  line-height: 60px;
  height: 60px;
}

.profile-dropdown {
  display: inline-block; 
}

.navbar-wrapper {
  display: inline-block;
  width: 100%;
}

.navbar-top-middle img {
  height: 32px; 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.navbar-menu {
  height: 48px; 
  display: block;
  width: 100%;
}

.navbar-menu-list {
  overflow-x: scroll;
  overflow-y: hidden;
  width: 100%;
  
  list-style-type: none;
  margin-left: 0;
}

.navbar-menu-each {
  padding-left: 32px;
  padding-right: 32px;
  
  display: inline;
}

.navbar-menu-each a {
  color: #333;
  font-size: 13px;
  text-decoration: none;
}

.menu-on a {
  font-weight: 700;
  color: #00c983;
}

.navbar-page-name {
  display: block;
  font-size: 22px;
  height: 60px;
  line-height: 60px;
  border-top: solid 0.5px #DEF5ED;
  border-bottom: solid 0.5px #DEF5ED;
  background-color: #F0FBF7;
  transform: translateY(-15%);
  color: #333;
  padding-left: 24px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">

<div class="navbar">
  <div class="navbar-top">
    <div class="navbar-top-left">
      <div class="burger-btn-wrapper">
        <i class="fas fa-bars"></i>
      </div>
      <div class="module-name">Employee</div>
    </div>
    <div class="navbar-top-middle">
      <img class="navbar-tree" src="https://cdn.frontify.com/api/screen/thumbnail/7UV_lfX5OBfHxFn5lc3ygK8UTU3z5pivwY9QDSDIOiFemj-DdmDzmwiPvbibaG63IMXz-MmGOs4aH-UqgoT9gw/350">
    </div>
    <div class="navbar-top-right">
      <div class="modules-icon"><i class="fas fa-th"></i></div>
      <div class="navbar-profile">
        <div class="profpic-wrapper">
          <div class="navbar-profpic">
            <div class="profile-initial">DJ</div>
          </div>
        </div>
        <div class="profile-name">Dennis Jonathan</div>
        <div class="profile-dropdown"><i class="fas fa-chevron-down"></i></div>
      </div>
    </div>
  </div>
  <div class="navbar-menu">
    <ul class="navbar-menu-list">
      <li class="navbar-menu-each menu-on"><a href="#">Employee Directory</a></li>
      <li class="navbar-menu-each"><a href="#">Memo</a></li>
      <li class="navbar-menu-each"><a href="#">Bulk Update</a></li>
      <li class="navbar-menu-each"><a href="#">Approvals and Undo</a></li>
      <li class="navbar-menu-each"><a href="#">Report</a></li>
    </ul>
  </div>
  <div class="navbar-page-name">
    Employee List
  </div>
</div>

最佳答案

我在这里修改了一点CSS。请看一下

.navbar {
  display: block; 
  width: 100%;
}

.navbar-top {
  width: 100%;
  min-height: 60px;
  box-shadow: 0px 1px 6px 0 rgba(0,0,0,0.1);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 10px;
     box-sizing: border-box;
}

.navbar-top-left {

}

.burger-btn-wrapper {
  display: inline-block;
  text-align: center;
  margin: 0 5px;
}

.burger-btn-wrapper i {
  font-size: 16px; 
  color: #333;
  line-height: 60px;
}

.module-name {
  height: 60px;
  line-height: 60px;
  text-transform: uppercase;
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #333;
}

.navbar-top-right {
}

.navbar-top-middle {
  height: 60px;
  text-align: center;
  position: relative;
  line-height: 0;
}

.modules-icon i {
  font-size: 16px; 
  color: #333;
}

.navbar-profile {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
}
.navbar-profile img {
    vertical-align: top;
}
.profpic-wrapper {
  display: inline-block;
  vertical-align: middle;
  width: 60px;
}

.navbar-profpic {
  width: 40px;
  height: 40px;
  background-color: #00c983;
  border-radius: 40px;
  position: relative;
  margin-left: 10px;
  margin-top: 10px;
}

.profile-initial {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

.profile-name {
  display: inline-block;
  vertical-align: middle;
  font-size: 13px;
}

.profile-dropdown {
    vertical-align: middle;
  display: inline-block; 
}

.navbar-wrapper {
  display: inline-block;
  width: 100%;
}

.navbar-top-middle img {
  height: 32px; 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.navbar-menu {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.navbar-menu-list {
  width: 750px;
  list-style-type: none;
  margin: 0;
  padding: 15px 0;
}

.navbar-menu-each {
  padding-left: 32px;
  padding-right: 32px;
  
  display: inline-block;
}

.navbar-menu-each a {
  color: #333;
  font-size: 13px;
  text-decoration: none;
}

.menu-on a {
  font-weight: 700;
  color: #00c983;
}

.navbar-page-name {
  display: block;
  font-size: 22px;
  height: 60px;
  line-height: 60px;
  border-top: solid 0.5px #DEF5ED;
  border-bottom: solid 0.5px #DEF5ED;
  background-color: #F0FBF7;
  transform: translateY(-15%);
  color: #333;
  padding-left: 24px;
}

.modules-icon {
    vertical-align: middle;
    display: inline-block;
    vertical-align: middle;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">

<div class="navbar">
  <div class="navbar-top">
    <div class="navbar-top-left">
      <div class="burger-btn-wrapper">
        <i class="fas fa-bars"></i>
      </div>
      <div class="module-name">Employee</div>
    </div>
    <div class="navbar-top-middle">
      <img class="navbar-tree" src="https://cdn.frontify.com/api/screen/thumbnail/7UV_lfX5OBfHxFn5lc3ygK8UTU3z5pivwY9QDSDIOiFemj-DdmDzmwiPvbibaG63IMXz-MmGOs4aH-UqgoT9gw/350">
    </div>
    <div class="navbar-top-right">
      <div class="modules-icon"><i class="fas fa-th"></i></div>
      <div class="navbar-profile">
        <div class="profpic-wrapper">
          <div class="navbar-profpic">
            <div class="profile-initial">DJ</div>
          </div>
        </div>
        <div class="profile-name">Dennis Jonathan</div>
        <div class="profile-dropdown"><i class="fas fa-chevron-down"></i></div>
      </div>
    </div>
  </div>
  <div class="navbar-menu">
    <ul class="navbar-menu-list">
      <li class="navbar-menu-each menu-on"><a href="#">Employee Directory</a></li>
      <li class="navbar-menu-each"><a href="#">Memo</a></li>
      <li class="navbar-menu-each"><a href="#">Bulk Update</a></li>
      <li class="navbar-menu-each"><a href="#">Approvals and Undo</a></li>
      <li class="navbar-menu-each"><a href="#">Report</a></li>
    </ul>
  </div>
  <div class="navbar-page-name">
    Employee List
  </div>
</div>

link

关于html - 强制内联 block 导航栏和列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50405318/

上一篇：html - 如何自定义排列位置绝对div标签

下一篇：html - 为什么显示:table set the parent element's height to its biggest floating child element's height?

相关文章：

html - 为什么我不能使用 CSS 来移动按钮？

php - 取消使用 PHP 提交的网络表单

javascript - 滚动时更改CSS样式的值

jquery - css jquery position 固定元素在右边。在 Firefox 中动画 BUG

html - 固定菜单位置，主体高度为 100%

影响 CSS 规则的 JavaScript/jQuery 函数

python - 使用 python Web 抓取数据？

html - 子子菜单CSS

javascript - 如何防止 jQuery prepend() 删除 HTML？

css - 是否可以同时使用 flexbox 执行类似 "row-reverse"和 "column-reverse"的操作？

©2024 IT工具网  联系我们