導航欄 - 區分

我創建了一個很棒的導航欄。唯一的問題是，我創建了一個鏈接，我看不到鏈接的一半。導航欄 - 區分

任何人都可以幫我嗎？

HTML：

<header id="main-header"> 
     <nav class="main-nav"> 
      <table id="header-nav-table"> 
       <tr> 
        <td></td> 
        <td></td> 
        <td><a href="#" class="header-nav-table-button">LINK</a></td> 
       </tr> 
      </table> 
     </nav> 
    </header>

CSS：

body { 
    background-color: #ECF0F1; 
    font-size: 100%; 
    font-family: 'Roboto', sans-serif; 
} 

section { 
    margin-right: 15%; 
    margin-left: 15%; 
    margin-top: 15%; 
    margin-bottom: 10%; 
} 

.main-nav { 
    width: 100%; 
    height: 18%; 
    background-color: #FFFFFF; 
    top: 0px; 
    left: 0px; 
    position: fixed; 
    border-bottom: 2px solid #4682B4; /* steelblue */ 
} 

.main-nav-addClass { 
    width: 100%; 
    height: 8%; 
    background-color: #FFFFFF; 
/* top: -1px; 
    left: -1px;*/ 
    position: fixed; 
    border-bottom: 2px solid #4682B4; /* steelblue */ 
} 

.header-nav-table-button { 
    margin-left: 1200px; 
    margin-top: 50px; 
    padding-left: 3%; 
    padding-right: 3%; 
    padding-top: 1%; 
    padding-bottom: 1%; 
    border: 1px solid #4682B4; 
    border-radius: 10px; 
    color: #4682B4; 
    background-color: #FFFFFF; 
    text-align: center; 
    text-decoration: none; 
} 

.header-nav-table-button:hover { 
    cursor: pointer; 
    border: 1px solid #ECF0F1; 
    color: #FFFFFF; 
    background-color: #4682B4; 
}

來源

2015-09-11 ghnome

不完全確定你在問什麼，鏈接的「hlf」是什麼？你在說「href」嗎？ – WOUNDEDStevenJones

根據你的HTML和CSS，它似乎一切正常。因爲您在頁眉導航表按鈕 – CodeRomeos

中設置了頁邊距1200px（？）我只能使用1200px，但我想使用80％ – ghnome

你需要一點填充添加到實際的表，像這樣

#header-nav-table { 
    padding-top:1%; 
}

例： http://jsfiddle.net/p5pejgqg/1/

來源

2015-09-11 17:38:23 Charlie74

它不起作用... – ghnome

sry .... ..... !!!!!!!!!!!!!! – ghnome

如果您檢查jsfiddle，您會看到該按鈕略微向下移動。如果您刪除了表格填充，它將會像在屏幕截圖中一樣移出顯示區域。你有另外一個

的元素嗎？您可能需要將更高的填充添加到HTML樹中，具體取決於您的完整代碼的外觀。 – Charlie74

導航欄 - 區分

回答

相關問題