强制内联块导航栏和列表

时间：2018-05-18 06:46:17

标签： html css

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

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

在第二个导航栏上，我使用水平列表。在大屏幕上它看起来没问题，但是当容器不能适合列表时，在较小的屏幕上，一些菜单向下移动。我想这样做，因此不适合屏幕的列表子被隐藏，可以通过水平滚动看到。如果滚动条不可见则更好。我尝试使用overflow-x: scroll，但它无法正常工作。

我真的很新，所以请忍受这个（显然）基本问题。任何帮助表示赞赏〜！

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

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

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

link

答案 1 :(得分：0)

丢失float声明，并在屏幕缩小时导致问题的margin-right:-4px级元素中添加inline-block。这应该保持一切正确对齐。

相关问题
最新问题