導航欄密切

我正在設計一個導航欄，需要關閉。這是簡單的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找到適合您的另一個寬度。測試一下...... –

回答

相關問題