gpt4 book ai didi

html - 将字体粗细更改为粗体会无意中改变元素的宽度

转载 作者:技术小花猫 更新时间:2023-10-29 12:10:06 25 4
gpt4 key购买 nike

<分区>

在为我的站点创建导航栏时,出于可用性目的,我决定将事件页面选项卡以粗体显示,但是当我更改元素上的 font-weight 时,它只会使元素更宽,我使用悬停效果制作的示例演示了我的问题,我从来不知道解决它的方法..

http://jsfiddle.net/amx7E/

HTML

<ul id="mainNav">
<li class="navItem">
<a class="navLink" id="activeLink">Link 1</a>
</li>

<li class="navItem">
<a class="navLink">Link 2</a>
</li>

<li class="navItem">
<a class="navLink">Link 3</a>
</li>
</ul>

CSS

* {
font-family: Arial;
font-size: 14px;
list-style: none;
margin: 0;
padding: 0;
text-decoration: none;
}

#mainNav {
background: RGB(200, 230, 240);
border-bottom: 1px solid RGB(0, 0, 0);
height: 30px;
margin: 0 auto;
position: relative;
width: 100%;
}

.navItem {
display: block;
float: left;
position: relative;
}

.navItem:last-child .navLink {
border-right: 1px solid RGB(0, 0, 0);
}

.navLink {
border-bottom: 1px solid RGB(0, 0, 0);
border-left: 1px solid RGB(0, 0, 0);
display: inline-block;
height: 30px;
line-height: 30px;
padding: 0 15px;
white-space: nowrap;
}

.navItem:hover .navLink {
background: RGB(120, 200, 250);
color: RGB(255, 255, 255);
cursor: pointer;
font-weight: bold;
}

#activeLink {
background: RGB(90, 170, 220);
color: RGB(255, 255, 255);
font-weight: bold;
}

#activeLink:hover {
background: RGB(110, 190, 240);
}

.navItem:hover .subNav {
display: block;
}

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com