导航栏密切

我正在设计一个导航栏，需要关闭。这是简单的HTML和CSS。我附加设计。这是设计应该是这样的： -导航栏密切

这是我目前的设计： -

<html> 
 
<head> 
 
    <title>Example</title> 
 
    <meta charset="UTF-8" /> 
 
</head> 
 

 
<body> 
 
    <div class="body"> 
 
    <div class="header"> 
 
     <h1>Home Page</h1> 
 

 
     <div class="navbar"> 
 
     <div> 
 
      <ul class="nav"> 
 
      <li class="nav"><a class="nav" href="#">Menu link 1</a></li> 
 
      <li class="nav"><a class="nav" href="#">Menu link 2</a></li> 
 
      <li class="nav"><a class="nav" href="#">Menu link 3</a></li> 
 
      <li class="nav"><a class="nav" href="#">Menu link 4</a></li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

来源

2015-10-26 cyberoy

你是什么意思”关闭“？ – showdev

导航栏的宽度需要小于当前值，请参见图片。 – cyberoy

从“一个删除。导航 “保证金风格：

margin-left: 15px; 
margin-right: 2px;

这里是你的新的导航栏类

.navbar { 
    height: 28px; 
    padding-top: 7px; 
    margin-top: 54px; 
    border: 1px solid #F00; 
}

和示例：https://jsfiddle.net/sqhaqcoo/1/

减少按钮的宽度变化padding: 8px 50px;到padding: 8px 40px;

来源

2015-10-26 20:30:29 kloshar4o

不过，导航栏并没有按照设计来减少。 – cyberoy

我想补充一个固定width:750px到.navbar和margin:0 auto，然后降低margin-left并删除margin-right为这样的a.nav：

body{ 
 
    background-color: #dddddd; 
 
    margin: 0; 
 
       padding: 0; 
 

 
      } 
 
      h1{ 
 
       color:#7ba1cc; 
 
       font-size: 20px; 
 
       margin: 0; 
 
       padding: 0; 
 
      } 
 
      table{margin: 0 auto; 
 
        margin-top: 20px; 
 
        width: 70%; 
 
      } 
 
      table, th, td { 
 
       border: 1px solid black; 
 

 
      } 
 
      .black{ 
 
       border-collapse: collapse; 
 
      } 
 

 
      .body{ 
 
       width: 800px; 
 
       height: 1000px; 
 
       margin: 0 auto; 
 
       background-color: #cccccc; 
 

 
      } 
 
      .header{ 
 
       height:115px; 
 
       background-color: #1d8bb3; 
 
      } 
 
      .navbar{ 
 
       height:25px; 
 
       padding-top:8px; 
 
       margin-top:57px; 
 
       border: 1px solid red; 
 
       width: 750px; 
 
       margin: 0 auto; 
 

 
      } 
 

 

 

 
      ul.nav, li.nav { 
 
       display:inline-block; 
 
       float: inside; 
 
       margin: 0px; 
 
       padding: 0px; 
 
       
 
      } 
 

 

 
      a.nav { 
 
       background-color: #E2DDDD; 
 
       padding: 8px 50px 8px 50px; 
 
       margin-left: 5px; 
 
       text-decoration: none; 
 
       text-align:center; 
 
      } 
 

 
      a:hover.nav { 
 
       background-color: #CCC8C8; 
 
      }

<html> 
 

 
    <head> 
 
     <title> Homework 2</title> 
 
     <meta charset= "UTF-8"> 
 
    </head> 
 

 
    <body> 
 

 
     <div class="body"> 
 
      <div class="header"> 
 
       <h1> Home Page </h1> 
 
       <div class="navbar" > 
 
        <div> 
 
         <ul class="nav"> 
 
          <li class="nav"><a class="nav" href="#">Menu link 1</a></li> 
 
          <li class="nav"><a class="nav" href="#">Menu link 2</a></li> 
 
          <li class="nav"><a class="nav" href="#">Menu link 3</a></li> 
 
          <li class="nav"><a class="nav" href="#">Menu link 4</a></li> 
 
         </ul> 
 
        </div> 
 
       </div> 
 
      </div> 
 

 
     </div> 
 

 
    </body> 
 

 
</html>

来源

2015-10-26 20:17:54

Can你请减少每个导航项目的宽度？ – cyberoy

将'padding：8px 50px 8px 50px;'更改为更小的内容，然后您需要为.navbar找到适合您的另一个宽度。测试一下...... –

回答

相关问题