菜单项CSS旁的徽标

时间：2019-02-02 16:56:09

标签： css

我找到了类似的主题，但是我仍然做不到。

我是新手，CSS和我的“项目”之一是重新引导的主页（https://getbootstrap.com/）我目前停留在导航栏。 请查看我的页面和实际的引导程序主页，以了解其想法。

在[徽标]左侧和中间的菜单项中显示起始表格。

感谢所有帮助。

ul {
   list-style-type: none;
   margin: -8px;
   padding: 20px;
   overflow: hidden;
   background-color:#563D7B;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   font-size: 14px;
}

li {
   float: left;
}

li a {
   color: #CABCE1;
   text-align: center;
   padding: 10px 10px;
   text-decoration: none;
}

li a:hover {
   color: white;
}

.navlogo {
   filter: invert(1);
   top: 20px;
   left: -20px;
   float: left;
}

.listhead{
   
}

.dropdown {
   float: left;
   overflow: hidden;
}


.dropdown .dropbtn {
   cursor: pointer;
   font-size: 16px;
   border: none;
   outline: none;
   color: #CABCE1;
   padding: 14px 16px;
   background-color: inherit;
   font-family: inherit;
   margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn,
.dropbtn:focus {
   color: white;
}

.dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   z-index: 1;
}
.dropdown-content a {
   float: none;
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   text-align: left;
}


.show {
   display: block;
}

@media screen and (max-width: 500px) {
   .navbar a {
      float: none;
      display: block;
   }

   

        
<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="stylesheet" type="text/css" href="../ver3/css/main.css">
   <title>Document</title>
</head>

<body>
   
   <header>
<img class="navlogo" src="../ver3/img/mnlogo.svg">
      <nav>
         <div id="menu-outer">
            <div class="tavle">
               <div class="navigation-bar">
                  
                  <ul id="horizontal">
                     
                     <li><a href="#">Home</a>
                     <li><a href="#">Documentation</a>
                     <li><a href="#">Examples</a>
                     <li><a href="#">Themes</a>
                     <li><a href="#">Expo</a>
                     <li><a href="#">Blog</a>
                  </ul>
               </div>

            </div>
         </div>
      </nav>
   </header>

</body>

</html>

2 个答案:

答案 0 :(得分：0)

这些天来，使用浮动控件已经很老套了，很难做到某些事情（例如垂直居中）。我已经将您的#horizo​​ntal li's从花车中换成了Flexbox。 3行CSS将它们居中。

ul {
   list-style-type: none;
   margin: -8px;
   padding: 20px;
   overflow: hidden;
   background-color:#563D7B;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   font-size: 14px;
}

#horizontal {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

li a {
   color: #CABCE1;
   text-align: center;
   padding: 10px 10px;
   text-decoration: none;
}

li a:hover {
   color: white;
}

.navlogo {
   width: 50px;
   height: 50px;
}

.listhead{
   
}

.dropdown {
   float: left;
   overflow: hidden;
}


.dropdown .dropbtn {
   cursor: pointer;
   font-size: 16px;
   border: none;
   outline: none;
   color: #CABCE1;
   padding: 14px 16px;
   background-color: inherit;
   font-family: inherit;
   margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn,
.dropbtn:focus {
   color: white;
}

.dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   z-index: 1;
}
.dropdown-content a {
   float: none;
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   text-align: left;
}


.show {
   display: block;
}

@media screen and (max-width: 500px) {
   .navbar a {
      float: none;
      display: block;
   }
<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="stylesheet" type="text/css" href="../ver3/css/main.css">
   <title>Document</title>
</head>

<body>
   
   <header>
      <nav>
         <div id="menu-outer">
            <div class="tavle">
               <div class="navigation-bar">
                  
                  <ul id="horizontal">
                     
                     <li><img class="navlogo" src="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-outline.svg" width="50" height="50"></li>
                     <li><a href="#">Home</a>
                     <li><a href="#">Documentation</a>
                     <li><a href="#">Examples</a>
                     <li><a href="#">Themes</a>
                     <li><a href="#">Expo</a>
                     <li><a href="#">Blog</a>
                  </ul>
               </div>

            </div>
         </div>
      </nav>
   </header>

</body>

</html>

答案 1 :(得分：0)

对徽标和导航列表使用公共的父元素来构建顶部栏并为其提供背景颜色会更容易。

构建这样的水平导航是特别容易使用flex-box：

body {
 margin: 0;
 padding: 0;
}


.nav-main {
  display: flex;
  align-items: center;
  background-color:#563D7B;
}

.nav-main .branding img {
  display: block;
}

.nav-main ul {
   list-style-type: none; 
   margin: 0;
   padding: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   font-size: 14px;
}

.nav-main li {
  display: inline-block;
}

.nav-main li a {
   color: #CABCE1;
   padding: 15px;
   text-decoration: none;
   display: block;
   transition: all 300ms ease-in-out;
}

.nav-main li a:hover {
   color: white;
}

.navlogo {
   filter: invert(1);
}

.dropdown {
   float: left;
   overflow: hidden;
}


.dropdown .dropbtn {
   cursor: pointer;
   font-size: 16px;
   border: none;
   outline: none;
   color: #CABCE1;
   padding: 14px 16px;
   background-color: inherit;
   font-family: inherit;
   margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn,
.dropbtn:focus {
   color: white;
}

.dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   z-index: 1;
}
.dropdown-content a {
   float: none;
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   text-align: left;
}


.show {
   display: block;
}

@media screen and (max-width: 500px) {
   .navbar a {
      float: none;
      display: block;
   }
<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="stylesheet" type="text/css" href="../ver3/css/main.css">
   <title>Document</title>
</head>

<body>
   
   <header>
      <nav class="nav-main">
        <a class="branding" href="/">
          <img src="https://fakeimg.pl/120x60/000000,000/FFF,255/?text=Nice–Logo&font=lobster">
        </a>
        <ul>
           <li><a href="#">Home</a>
           <li><a href="#">Documentation</a>
           <li><a href="#">Examples</a>
           <li><a href="#">Themes</a>
           <li><a href="#">Expo</a>
           <li><a href="#">Blog</a>
        </ul>
      </nav>
   </header>

</body>

</html>

相关问题
最新问题