gpt4 book ai didi

html - 导航栏 - 差异化

转载 作者:行者123 更新时间:2023-11-28 07:12:49 26 4
gpt4 key购买 nike

我创建了一个导航栏,效果很好。唯一的问题是,我创建了一个链接,但看不到链接的一半。

谁能帮帮我???

enter image description here

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;
}

最佳答案

您需要在实际表格中添加一些填充,就像这样

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

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

关于html - 导航栏 - 差异化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32528563/

26 4 0