Question

我试图降低导航栏的高度。当我使用min-height属性时，它会在导航栏中添加一个滚动条，使其不那么吸引人。我想将徽标对齐到最左边，将其余内容对齐到最右边。我已经附上了下面的代码。请帮我解决。

＆＃13;

  .navigation {
      background-color: rgba(15,58,114,0.9);
      overflow-y: auto;
      position: fixed;
      left: 0;
      top: 0;
      text-align: left;
      width: 100%;
      z-index: 10000;
      box-sizing: border-box;
    }
     .log {
     text-align: right;
     top: 0;
     margin: 0 auto;
     right: 0;
  

     }
         ul {
         padding: 0;
       }
         li {
        color: White;
        display: inline-block;
        font-family: 'Raleway', sans-serif;
        font-size: 18px;
        font-weight: 300;
        margin: 16px 20px;
        text-transform: uppercase;
       }
         li a {
        display: inline-block;
        color: White;
        text-align: Center;
        padding: 14px 16px;
        text-decoraton: none;
       }
        li a:hover {
        background-color: rgba(0,0,0,0);
       }
        #logo {
        color: #FFFFFF;
        font-family: 'Vollkorn';
        font-size: 34px;
        padding: 0px 50px;
        text-align: center;
       }

＆＃13;

 <div class="navigation">
    <ul>
       <li id="logo"><a href = "#logo">LOGO</a></li>
       <div class="log">
       <li><a href = "/login.html">LOGIN</a></li>
       <li><a href = "#join">JOIN WITH US</a></li>
       </div>
     </ul>
  </div>

＆＃13;

Answer 1

您有滚动条，因为内容太大而且overflow-y: auto; Overflow控制了当内容对于父div大小来说太大时的行为。

float属性可用于以一致的方式将元素移动到查看器的不同侧面。

您的代码仍无响应，无法在小于365px宽的屏幕上正确显示。如果添加更多菜单项，支持范围将变小。

您可以查看很多资源来制作responsive menu

这是你想要的吗？

body {
  margin: 0 auto;
  padding: 0
}

.navigation {
  background-color: rgba(15, 58, 114, 0.9);
  position: fixed;
  height: 60px;
  line-height: 60px; /* needs to be the same height as your navigation div */
  top: 0;
  width: 100%;
  z-index: 10000;
}

.log {
  float: right; /* pulls the div to the right side */
}

ul {
  padding: 0;
  margin: 0 auto;
}

li {
  color: White;
  display: inline-block;
  font-family: 'Raleway', sans-serif;
  font-size: 18px;
  font-weight: 300;
  margin: 0 auto;
  text-transform: uppercase;
}

li a {
  color: White;
  text-align: Center;
  padding: 0 10px;
  text-decoration: none;
}

li a:hover {
  color:wheat;
}

#logo {
  color: #FFFFFF;
  font-family: 'Vollkorn';
  font-size: 34px;
  padding: 0px 10px;
  float: left; /* pulls the div to the left side */
}

<div class="navigation">
  <ul>
    <li id="logo"><a href="#logo">LOGO</a></li>
    <div class="log">
      <li><a href="/login.html">LOGIN</a></li>
      <li><a href="#join">JOIN WITH US</a></li>
    </div>
  </ul>

Answer 2

我的风格做了一点改变：

 .navigation {
        background-color: rgba(15, 58, 114, 0.9);
        overflow-y: auto;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        text-align: left;
        width: 100%;
        z-index: 10000;
        box-sizing: border-box;
    }
    
    .log {
        margin: 0 auto;
        float: right;
    }
    
    ul {
        padding: 0;
    }
    
    li {
        color: White;
        list-style: none;
        font-family: 'Raleway', sans-serif;
        font-size: 18px;
        font-weight: 300;
        text-transform: uppercase;
        float: right;
    }
    
    li a {
        display: inline-block;
        color: White;
        text-align: Center;
        padding: 14px 16px;
        text-decoration: none;
    }
    
    li a:hover {
        background-color: rgba(0, 0, 0, 0);
    }
    
    #logo {
        color: #FFFFFF;
        font-family: 'Vollkorn';
        font-size: 34px;
        padding: 0px 50px;
        text-align: center;
        float: left !important;
        margin-top: -10px;
    }

 <div class="navigation">
        <ul>
            <li id="logo"><a href="#logo">LOGO</a></li>
            <div class="log">
                <li><a href="/login.html">LOGIN</a></li>
                <li><a href="#join">JOIN WITH US</a></li>
            </div>
        </ul>
    </div>

Answer 3

您的徽标以及您的菜单列表下方 - 这就是问题

并肩作战

.navigation ul {
    display: flex;
}

.navigation {
  background-color: rgba(15,58,114,0.9);
  overflow-y: auto;
  position: fixed;
  left: 0;
  top: 0;
  /*text-align: left;*/
  width: 100%;
  z-index: 10000;
  box-sizing: border-box;
}

.navigation ul {
	display: flex;      /* new line added */
}

#logo {
	flex: 2;  /* new line added */
}

 .log {
 /*text-align: right;*/
 top: 0;
 margin: 0 auto;
 right: 0;
display: flex;    /* new line added */
flex: 8;			 /* new line added */
justify-content: flex-end;    /* new line added */
 }
     ul {
     padding: 0;
   }
     li {
    color: White;
    display: inline-block;
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    font-weight: 300;
    margin: 16px 20px;
    text-transform: uppercase;
   }
     li a {
    display: inline-block;
    color: White;
    text-align: Center;
    padding: 14px 16px;
    text-decoration: none;	
   }
    li a:hover {
    background-color: rgba(0,0,0,0);
   }
    #logo {
    color: #FFFFFF;
    font-family: 'Vollkorn';
    font-size: 34px;
    padding: 0px 50px;
    text-align: center;
   }

  <div class="navigation">
        <ul>
            <li id="logo"><a href="#logo">LOGO</a></li>
            <div class="log">
                <li><a href="/login.html">LOGIN</a></li>
                <li><a href="#join">JOIN WITH US</a></li>
            </div>
        </ul>
    </div>

Answer 4

对您的HTML和CSS进行了更改

div with class log是一个块级元素，意味着它占据页面宽度的100％，使它们显示：inline-block并将其浮动到右边，使徽标换行为div并将其浮动到左边。因为我们有两个浮动元素导航栏高度被折叠以避免它我们需要添加clearfix

HTML

 <div class="navigation clearfix">
   <div class="logo"><a href = "#logo">LOGO</a></div>
  <div class="menu">
    <ul>
     <li><a href = "/login.html">LOGIN</a></li>
     <li><a href = "#join">JOIN WITH US</a></li>
   </ul>
   </div>
 </div>

CSS

.navigation {
  background-color: rgba(15,58,114,0.9);
  overflow-y: auto;
  position: fixed;
  left: 0;
  top: 0;
  text-align: left;
  width: 100%;
  z-index: 10000;
  box-sizing: border-box;
}
.logo{
  float:left;
  display:inline-block;
}
.logo a{
  padding:8px 2px;
  color:#fff;
  display:block;
}
.menu{
  float:right;
}
.clearfix::after{
  content:"";
  display:table;
  width:100%;
}
.menu ul{
  padding:0px;
  list-style-type:none;
  margin:0;
}
.menu ul li{
  display:inline-block;
}

.menu ul li a{
  color:#fff;
  padding:8px 2px;
  display:block;
}

Link For reference

相应的风格

希望这会有所帮助..

如何降低css中导航栏的高度

4 个答案: