问题描述
我的导航栏有问题,我想知道如何使布景更靠近最左边的边缘。
CSS:
#nav
{
overflow: auto;
user-select: none;
background: grey;
width: 100%;
}
#nav li
{
display: inline-block;
list-style-type: none; /* removes bullets */
padding: 10px;
margin: 0px; /* removes margins */
background: grey;
}
#nav li:hover
{
background: green;
user-select: green;
}
小提琴:https://jsfiddle.net/yumyum0/cgx61w0q/2/
另外,我不确定#nav li:hover 中的背景和用户选择是否多余。我根据 https://html.com/css/#example-nav 上的教程对其进行建模,并开始添加内容以尝试按照我想要的方式设置样式。我离知道所有声明的作用还有很长的路要走。它曾经是齐平的,所以我想我可能添加了一些有冲突的东西,或者我在不知情的情况下删除了它。
我也有一个与此无关的问题,这种格式可以吗?我不确定是否就括号和其他所有内容达成一致。
解决方法
将此规则集放在代码的开头将删除导航栏顶部的边距。
* {
position: relative;
margin: 0 0;
}
您的格式略有偏差;将左括号与 CSS 选择器放在同一行,并确保规则集之间存在间隙,以提高可读性。
,您可以将绝对定位并声明它必须位于页面的最左侧。
#nav
{
overflow: auto;
user-select: none;
background: grey;
width: 100%;
position: absolute;
left: 0;
}
代码样式由您决定!我喜欢把名字和大括号放在同一行,比如 #nav {
一件好事是设置 HTML 和 Body 标签的样式。这就是我要做的:
html,body {
margin: 0; // Removes space on the sides
box-sizing: border-box;
width: 100%;
height: 100%;
}
#nav
{
overflow: auto;
user-select: none;
background: grey;
width: 100%;
box-sizing: border-box; // Add this to take 100% width without overflowing
margin: 0; // Remove space above nav bar
}
...rest of your CSS
,
-
导航间距:需要研究的一件事是一种名为“CSS Reset”的解决方案。 Chrome 和 Firefox 等浏览器对 HTML 选择器有不同的“基本值”。重置样式表可确保您的所有元素都具有相同的“基本”样式。有 1000 种不同的重置表是不同的人尝试过的。在我看来,它们大致都在做同样的事情。默认情况下,
<body>
标签有分配给它的边距。除其他外,重置表通常会将这些分配给 0。 -
与上面类似,默认情况下
<ul>
标签也有边距。您应该添加以下 CSS:
html,body {
margin: 0;
}
#nav
{
background: grey;
width: 100%;
margin: 0;
}
- 让我们讨论
user-select
属性。您可以使用此属性来针对网页上的复制/粘贴情况定位“突出显示”或“文本选择”。我不认为这是您应该用于“悬停”效果的内容。使用background
属性应该没问题。