旁边的菜单项CSS标志

问题描述 投票：1回答：2

我发现了相似的话题，但我还是没能做到这一点。

我是新手，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>
css
2个回答
0
投票

使用花车是老派的这些天，使其难以做某些事情（比如垂直居中）。我换你的#horizo​​ntal里的彩车使用Flexbox的来代替。 CSS的3线居中他们。

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>
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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.