css - 间隙边界的左右
问题描述
当我对“a”元素应用填充时,顶部边框的左右两侧会有间隙。我希望顶部边框覆盖整条线,直到导航栏的右边框。我怎么解决这个问题。
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 6fr;
}
.navbar {
border-right: gray 3px solid;
padding: 5%;
position: sticky;
top: 0;
height: 100vh;
box-sizing: border-box;
min-width: 300px;
}
#navbar-header {
text-align: center;
margin-bottom: 20px;
}
#navbar-content a {
text-decoration: none;
color: black;
}
#navbar-content a li {
list-style: none;
padding: 5%;
padding-left: 10%;
border-top: gray 1px solid;
}
<div class="wrapper">
<div class="navbar">
<h2 id="navbar-header">JS Documentation</h2>
<ul id="navbar-content">
<a href="#intro">
<li>Introduction</li>
</a>
<a href="#know">
<li>What you should already know</li>
</a>
<a href="#js-java">
<li>JavaScript and Java</li>
</a>
<a href="#hello">
<li>Hello World</li>
</a>
<a href="#var">
<li>Variables</li>
</a>
<a href="#dec-var">
<li>Declaring Variables</li>
</a>
<a href="#var-sco">
<li>Variable Scope</li>
</a>
<a href="#glo-var">
<li>Global Variables</li>
</a>
<a href="#cons">
<li>Constants</li>
</a>
<a href="#data">
<li>Data Types</li>
</a>
<a href="#if-else">
<li>if...else statement</li>
</a>
<a href="#while">
<li>while statement</li>
</a>
<a href="#func">
<li>Function declarations</li>
</a>
<a href="#ref">
<li>Reference</li>
</a>
</ul>
</div>
<div class="contents">
</div>
</div>
当我对“a”元素应用填充时,顶部边框的左右两侧会有间隙。我希望顶部边框覆盖整条线,直到导航栏的右边框。我怎么解决这个问题。
解决方案
从导航栏中删除 padding-left/right 并增加以下之一li
:
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 6fr;
}
.navbar {
border-right: gray 3px solid;
padding: 5% 0; /*updated*/
position: sticky;
top: 0;
height: 100vh;
box-sizing: border-box;
min-width: 300px;
}
#navbar-header {
text-align: center;
margin-bottom: 20px;
}
#navbar-content a {
text-decoration: none;
color: black;
}
#navbar-content a li {
list-style: none;
padding: 5% 10%; /*updated*/
border-top: gray 1px solid;
}
<div class="wrapper">
<div class="navbar">
<h2 id="navbar-header">JS Documentation</h2>
<ul id="navbar-content">
<a href="#intro">
<li>Introduction</li>
</a>
<a href="#know">
<li>What you should already know</li>
</a>
<a href="#js-java">
<li>JavaScript and Java</li>
</a>
<a href="#hello">
<li>Hello World</li>
</a>
<a href="#var">
<li>Variables</li>
</a>
<a href="#dec-var">
<li>Declaring Variables</li>
</a>
<a href="#var-sco">
<li>Variable Scope</li>
</a>
<a href="#glo-var">
<li>Global Variables</li>
</a>
<a href="#cons">
<li>Constants</li>
</a>
<a href="#data">
<li>Data Types</li>
</a>
<a href="#if-else">
<li>if...else statement</li>
</a>
<a href="#while">
<li>while statement</li>
</a>
<a href="#func">
<li>Function declarations</li>
</a>
<a href="#ref">
<li>Reference</li>
</a>
</ul>
</div>
<div class="contents">
</div>
</div>
推荐阅读
- javascript - DiscordJS 错误 - ReferenceError:未定义成员
- c++ - MPI 大小和 OpenMP 线程数
- python - 如何计算python中给定单词的频率
- javascript - Angular 指令输入的动态属性绑定
- cmake - 让 CMake 执行一个不是 CMakeLists.txt 的文件
- mysql - 在 Camel 指标中禁用 camel-debezium-mysql 端点 URI
- javascript - 需要简化的 onclick 按钮声音功能
- python-3.x - 如何分组两次,保留原始列并绘制
- python - 是否可以为 Django 中的每个表单域添加/删除 HTML 属性
- php - 我需要按字面上的日期过滤 Laravel