浮动不起作用，因此导航仪无法水平移动

时间：2019-10-01 13:47:48

标签： html css sass

好，所以我希望导航在页面上水平显示

我尝试了float和inline-block来解决它，但是它不起作用

.header {
  height: 95vh;
  background-size: cover;
  background-position: top;
  position: relative;

  -webkit-clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);

  &__logo-box {
    position: absolute;
    top: 4rem;
    left: 4rem;
    z-index: 4;
  }

  &__logo {
    height: 35px;
    transform: scale(1.5);
    z-index: 4;
  }
  &__text-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 5;
  }
}



.video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
  object-fit: cover;
}

.gradient {
  background: linear-gradient(
    90deg,
    rgba(30, 95, 156, 1) 1%,
    rgba(16, 55, 130, 0.2637429971988795) 100%
  );

  z-index: 2;
  min-width: 100%;
  min-height: 100%;
  height: calc(100vh - 80px);
  object-fit: cover;
  position: relative;
}


.header-links {
  position: fixed;
 width: 100%;
 z-index: 500;
 }

 .header-links li {
   color: white;
   display: inline;
   float: right;
   padding: 15px;
   font-size: 16px;
 }

 .header-links a {
   color: #757575;
   -webkit-transition: all 0.2s ease-in;
 }

 .header-links a:hover {
   color: #FF6363 !important;
 }

.hor-nav{
  position: fixed;
	top: 40px;
	right: 40px;
	width: 50px;
	height: 50px;
  z-index: 20;
  color: $color-white;
}

ul{
  list-style-type: none;
  
  color:$color-white;
}
li {
  float: left;
}

li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
<header class="header">
      <div class="gradient">
      </div>
      <video autoplay muted loop class="video">
        <source src="img/bg-video.mp4" type="video/mp4" />
      </video>
      
      <div class="header__logo-box">
        <a href="#"><img src="img/logo-white.png" alt="logo" class="header__logo" /></a>
      </div>
      <div class="hor-nav">
        <ul>
          <li><a href="#"></a>Home</a></li>
          <li><a href="#"></a>About</a> </li>
          <li><a href="#"></a>Invest</a></li>
          <li><a href="#"></a>Insights</a></li>
          <li><a href="#"></a>Technology</a></li>
          <li><a href="#"></a>Performance</a></li>
          <li><a href="#"></a>Education</a></li>
        </ul>
      </div>
      


       <!-- <ul>
          <li>Home</li>
          <li>About</li>
          <li>Invest</li>
          <li>Insights</li>
          <li>Technology</li>
          <li>Performance</li>
          <li>Education</li>
        </ul> -->



      





      <div class="header__text-box">
        <h1 class="heading-primary">
          <span class="heading-primary--main"
            >Looking for a reliable source of Income for Life?
          </span>
          <span class="heading-primary--sub"> We have the solution!</span>
        </h1>
        <a href="#" class="btn btn--white btn--animated">Call us NOW!</a>
      </div>
    </header>

3 个答案:

答案 0 :(得分：0)

只需除去导航包装的宽度（.hor-nav）。这样，它们将彼此对齐。

.header {
  height: 95vh;
  background-size: cover;
  background-position: top;
  position: relative;

  -webkit-clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);

  &__logo-box {
    position: absolute;
    top: 4rem;
    left: 4rem;
    z-index: 4;
  }

  &__logo {
    height: 35px;
    transform: scale(1.5);
    z-index: 4;
  }
  &__text-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 5;
  }
}



.video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
  object-fit: cover;
}

.gradient {
  background: linear-gradient(
    90deg,
    rgba(30, 95, 156, 1) 1%,
    rgba(16, 55, 130, 0.2637429971988795) 100%
  );

  z-index: 2;
  min-width: 100%;
  min-height: 100%;
  height: calc(100vh - 80px);
  object-fit: cover;
  position: relative;
}


.header-links {
  position: fixed;
 width: 100%;
 z-index: 500;
 }

 .header-links li {
   color: white;
   display: inline;
   float: right;
   padding: 15px;
   font-size: 16px;
 }

 .header-links a {
   color: #757575;
   -webkit-transition: all 0.2s ease-in;
 }

 .header-links a:hover {
   color: #FF6363 !important;
 }

.hor-nav{
  position: fixed;
	top: 40px;
	right: 40px;
	height: 50px;
  z-index: 20;
  color: $color-white;
}

ul{
  list-style-type: none;
  
  color:$color-white;
}
li {
  float: left;
}

li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
<header class="header">
      <div class="gradient">
      </div>
      <video autoplay muted loop class="video">
        <source src="img/bg-video.mp4" type="video/mp4" />
      </video>
      
      <div class="header__logo-box">
        <a href="#"><img src="img/logo-white.png" alt="logo" class="header__logo" /></a>
      </div>
      <div class="hor-nav">
        <ul>
          <li><a href="#"></a>Home</a></li>
          <li><a href="#"></a>About</a> </li>
          <li><a href="#"></a>Invest</a></li>
          <li><a href="#"></a>Insights</a></li>
          <li><a href="#"></a>Technology</a></li>
          <li><a href="#"></a>Performance</a></li>
          <li><a href="#"></a>Education</a></li>
        </ul>
      </div>
      


       <!-- <ul>
          <li>Home</li>
          <li>About</li>
          <li>Invest</li>
          <li>Insights</li>
          <li>Technology</li>
          <li>Performance</li>
          <li>Education</li>
        </ul> -->



      





      <div class="header__text-box">
        <h1 class="heading-primary">
          <span class="heading-primary--main"
            >Looking for a reliable source of Income for Life?
          </span>
          <span class="heading-primary--sub"> We have the solution!</span>
        </h1>
        <a href="#" class="btn btn--white btn--animated">Call us NOW!</a>
      </div>
    </header>

答案 1 :(得分：0)

从每个菜单项中首先删除UPDATE STUDENT stdnt SET stdnt.STOP_TEMPLATE_ID = ( SELECT ST.STOP_TEMPLATE_ID FROM STOP_TEMPLATE ST JOIN TASK_TEMPLATE TT ON (ST.TASK_TEMPLATE_ID = TT.TASK_TEMPLATE_ID AND TT.TASK_NAME = stdnt.route_code AND TT.DISPATCH_TYPE = stdnt.DISPATCH_TYPE) JOIN RUN_TEMPLATE RT ON (ST.RUN_TEMPLATE_ID = RT.RUN_TEMPLATE_ID AND RT.RUN_CODE = stdnt.RUN_CODE) WHERE ST.STOP_DESCRIPTION = stdnt.STOP_ADDRESS AND CAST(ST.EXPECTED_ARRIVAL_TIME AS TIME(7)) = stdnt.STOP_TIME ); 。 html变成这个

</a>

此CSS可用于hor-nav 

<div class="hor-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a> </li>
    <li><a href="#">Invest</a></li>
    <li><a href="#">Insights</a></li>
    <li><a href="#">Technology</a></li>
    <li><a href="#">Performance</a></li>
    <li><a href="#">Education</a></li>
  </ul>
</div>

Suc6。

答案 2 :(得分：0)

这是一个简单的把戏：

.hor-nav > ul {
   display: flex;
}
相关问题
最新问题