如何填充錨文本和邊界之間的空白時，填充已零？

我工作的導航菜單上，並創建了一個包含四個錨標籤，如下圖所示：如何填充錨文本和邊界之間的空白時，填充已零？

<nav> 
<ul> 
     <li><a href="/" class="active">BLOG</a></li> 
     <li><a href="/about/">ABOUT ME</a></li> 
     <li><a href="/portfolio/">PORTFOLIO</a></li> 
     <li><a href="/contact/" class="highlight">CONTACT</a></li> 
    </ul> 
</nav>

我給自己定的10px的頂部邊框的每一個環節，我想穩坐上文本的頂部。儘管在所有正確的位置將填充設置爲0，但我無法擺脫填充。我試過改變線條高度，但這只是將整個導航部分向上或向下移動到屏幕上，並且不會影響到定位文字和頂部邊框之間的間隙。

這裏的CSS（不包括CSS重置等，而如果需要，我可以發佈，但這些大多是從HTML5BoilerPlate出來。

nav ul { 
     padding-right: 24px; 
     float: right; 
    } 

    nav li { 
     display: inline; 
     font-family: Oswald; 
     font-size: 25px; 
    } 

    nav a { 
     color: #7a7a7a; 
     text-decoration: none; 
     margin-left: 16px; 
    } 

    nav li a { 
     border-top: 10px solid #7a7a7a; 
    } 

    nav a:hover { 
     color: #555555 
    } 

    nav a.active { 
     color: #555555; 
    } 

    nav a.highlight:hover { 
     color: #1f9c66; 
    } 

    a.highlight { 
     color: #29cf86; 
    }

誰能幫助？謝謝。

來源

2012-04-17 jasonbradberry

我想到的一個問題是，文本上方和下方可能總是存在空白以允許特殊字符，所以需要一種解決方法？ – jasonbradberry 2012-04-17 22:50:43

爲什麼你有獨立的'nav a'和'nav li a'選擇器？ – 2012-04-17 22:53:03

固定。謝謝:) – jasonbradberry 2012-04-17 23:07:21

你可以翻譯錨幾個像素達到通過相對定位：

li { 
    display: inline; 
    margin-left: 16px; 
    border-top: 10px solid #7a7a7a; 
} 

a { 
    position: relative; 
    top: -6px; 
}

現場演示：http://jsfiddle.net/XQK9h/

來源

2012-04-17 22:57:23

謝謝，這使錨點很好地移動，但不幸的是也移動了邊界。我不想將邊框分隔成另一個html元素，因爲我希望它自動設置爲文本寬度。 – jasonbradberry 2012-04-17 23:00:58

@jasonbradberry你可以在LI元素上應用邊框，然後確保它不會比錨點寬... – 2012-04-17 23:03:09

任何想法如何設置LI邊界自動與錨點寬度相同？ – jasonbradberry 2012-04-17 23:06:37

我認爲它可以幫助你。

<style type="text/css"> 

nav ul { 
    padding-right: 24px; 
    float: right; 
} 

nav div { 
    border-top: 10px solid green; 
    display: block; 
    float: left; 
    font-family: Oswald; 
    font-size: 25px; 
    height: 10px; 
    margin: 10px; 
} 

nav a { 
    color: #7a7a7a; 
    text-decoration: none; 
} 

nav a:hover { 
    color: #555555 
} 

nav a.active { 
    color: #555555; 
} 

nav a.highlight:hover { 
    color: #1f9c66; 
} 

a { 
    position: relative; 
    top: -3px; 
} 
a.highlight { 
    color: #29cf86; 
} 

</style> 

<nav> 
<ul> 
    <div><a href="/" class="active">BLOG</a></div> 
    <div><a href="/about/">ABOUT ME</a></div> 
    <div><a href="/portfodivo/">PORTFOLIO</a></div> 
    <div><a href="/contact/" class="highdivght">CONTACT</a></div> 
</ul> 
</nav>

來源

2012-04-17 23:16:39 Swathi

設置錨浮動這將消除每一個Web瀏覽器的保證金&填充。

#container li a { 
    float:left; 
}

來源

2012-10-17 02:38:02 image72

如何填充錨文本和邊界之間的空白時，填充已零？

回答

相關問題