文字和邊框之間的空格

我用了padding-top在li和邊框之間製作空格，但它移動了所有的導航欄位置。文字和邊框之間的空格

反正有沒有移動它的空間？

nav { 
 
    float: right; 
 
    width: 80%; 
 
    font-size: 80%; 
 
    text-align: right; 
 
} 
 
nav li { 
 
    display: inline-block; 
 
    list-style-type: none; 
 
    margin: 2.5%; 
 
    padding: 0.5%; 
 
} 
 
nav li a { 
 
    color: #646464; 
 
    font-weight: bold; 
 
    text-decoration: none; 
 
} 
 
nav li.active, 
 
nav li:hover { 
 
    border-top: 3px solid #f0842a; 
 
    padding-top: 20px; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="#link3">LINK 1</a> 
 
    </li> 
 
    <li class="active"><a href="#link4">LINK 2</a> 
 
    </li> 
 
    <li><a href="#link5">LINK 3</a> 
 
    </li> 
 
    </ul> 
 
</nav>

來源

2015-08-28 obk

你是什麼意思'它移動所有的導航欄位置。什麼是期望的效果？ – Tushar

我只是想在邊界和文本之間留出空間而不用移動導航 – obk

將-20px的邊距添加到.nav將取消放下。

nav { 
 
    float: right; 
 
    width: 80%; 
 
    font-size: 80%; 
 
    text-align: right; 
 
    margin-top: -20px; 
 
} 
 
nav li { 
 
    display: inline-block; 
 
    list-style-type: none; 
 
    margin: 2.5%; 
 
    padding: 0.5%; 
 
} 
 
nav li a { 
 
    color: #646464; 
 
    font-weight: bold; 
 
    text-decoration: none; 
 
} 
 
nav li.active, 
 
nav li:hover { 
 
    border-top: 3px solid #f0842a; 
 
    padding-top: 20px; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="#link3">LINK 1</a> 
 
    </li> 
 
    <li class="active"><a href="#link4">LINK 2</a> 
 
    </li> 
 
    <li><a href="#link5">LINK 3</a> 
 
    </li> 
 
    </ul> 
 
</nav>

來源

2015-08-28 11:16:29

它解決了這個問題，但我想知道是否使用負邊距是一種正確的方式？ – obk

@obk我在很多項目中都使用過它，它是一個簡單的修復程序，從來沒有遇到過任何問題。 – 2015-08-28 11:26:15

@WilliamBargent我想建議你，一般使用負餘量是壞習慣，所以儘量避免它，因爲你可以 –

您可以使用10pxmargin-top和10pxpadding-top。這將保持元素的尺寸相同，邊框將更接近文本。

使用此項，li元素的頂部總空間爲20px。

nav { 
 
    float: right; 
 
    width: 80%; 
 
    font-size: 80%; 
 
    text-align: right; 
 
} 
 
nav li { 
 
    display: inline-block; 
 
    list-style-type: none; 
 
    margin: 2.5%; 
 
    padding: 0.5%; 
 
} 
 
nav li a { 
 
    color: #646464; 
 
    font-weight: bold; 
 
    text-decoration: none; 
 
} 
 
nav li.active, 
 
nav li:hover { 
 
    border-top: 3px solid #f0842a; 
 
    padding-top: 10px; /* Use 10px; here */ 
 
    margin-top: 10px; /* Use 10px; here */ 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="#link3">LINK 1</a> 
 
    </li> 
 
    <li class="active"><a href="#link4">LINK 2</a> 
 
    </li> 
 
    <li><a href="#link5">LINK 3</a> 
 
    </li> 
 
    </ul> 
 
</nav>

來源

2015-08-28 11:11:38 Tushar

如果所期望的效果是當施加到菜單項中的一個活性類，而不是轉移菜單你應該有一個邊界頂部用於與相同的寬度，但透明的或相同的每個列表項作爲背景顏色，並且當活動的類應用時，它只會改變這個邊界的顏色。

來源

2015-08-28 11:14:15 AntK

使用負利潤率，我認爲一個壞習慣這是我的想法，我在許多文章已經閱讀以及和按您接受的答案還有另一種實現這件事的方法，在這裏我已經給

nav { 
 
    float: right; 
 
    width: 80%; 
 
    font-size: 80%; 
 
    text-align: right; 
 
} 
 
nav ul{ 
 
    margin-top: 0; 
 
} 
 
nav li { 
 
    display: inline-block; 
 
    list-style-type: none; 
 
    margin: 0 2.5% 2.5% 2.5%; 
 
    padding: 0.5%; 
 
} 
 
nav li a { 
 
    color: #646464; 
 
    font-weight: bold; 
 
    text-decoration: none; 
 
} 
 
nav li.active, 
 
nav li:hover { 
 
    border-top: 3px solid #f0842a; 
 
    padding-top: 20px; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="#link3">LINK 1</a> 
 
    </li> 
 
    <li class="active"><a href="#link4">LINK 2</a> 
 
    </li> 
 
    <li><a href="#link5">LINK 3</a> 
 
    </li> 
 
    </ul> 
 
</nav>

，這裏是演示工作代碼

Check Out

Actual Demo

來源

2015-08-28 11:31:15

@obk請檢查你可以實現這個另一種方式 –

它不工作，因爲我在尋找..負邊界給出了更好的結果 – obk

@obk嗨實際上我錯誤地更新了以前的演示，所以沒有工作，所以現在編輯實際的一個，你可以看到它正在工作 –

nav{ 
 
    float:right; 
 
    width:80%; 
 
    font-size:80%; 
 
    text-align: right; 
 
    overflow: hidden; 
 
} 
 
nav li{ 
 
    float: left; 
 
    list-style-type: none; 
 
    padding: 20px 0; 
 
    margin-right: 20px; 
 
    border-top: 3px solid transparent; 
 
} 
 
nav li a{ 
 
    color: #646464; 
 
    font-weight: bold;     
 
    display: block; 
 
    text-decoration: none; 
 

 
} 
 
nav li.active, 
 
nav li:hover{ 
 
    border-top-color:#f0842a; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="#link3">LINK 1</a> 
 
    </li> 
 
    <li class="active"><a href="#link4">LINK 2</a> 
 
    </li> 
 
    <li><a href="#link5">LINK 3</a> 
 
    </li> 
 
    </ul> 
 
</nav>

來源

2015-08-28 11:47:57

文字和邊框之間的空格

回答

相關問題