Question

我最近学到了html和css，有些东西我不明白如何删除我网站底部的空白区域：http://puu.sh/kSu7r/2fd0ed9532.png

我有一个我希望修复的栏http://puu.sh/kSudx/2d6c69a679.png（即使我向下滚动也停留），但因为它的代码涉及位置：相对它不起作用..

以下是代码：

.bar {
	padding:0px;
	background-color:#333333;
	height:60px;
	top: -10px;
	width:100%;
	text-align:center;
}

.bar ul {
	position:relative;
  transform: translateY(-50%);
  top: 50%;
}


.bar li {
	display:inline;
	color:white;
	font-style:Verdana;
	text-align:center;
	font-size:2em;
	font-family:'Raleway';
	margin:10px;
	padding:10px;
}

.bar a {
	text-decoration:none;
	color:white;
}

<div class="bar">
<ul>
<li class="btn"><a href="#bottom">Element1</a></li>
<li class="btn"><a href="#bottom">Element2</a></li>
<li class="btn"><a href="#bottom">Element3</a></li>
<li class="btn"><a href="#bottom">Element4</a></li>
</ul>
</div>

非常感谢。

Answer 1

首先我开始使用CSS中的.bar。我会改变一些事情。

对于.bar课程，我会移除padding:0;，height:40px，top:-10px;。您删除了padding，因为div标记已经没有填充，height将由ul控制（稍后会详细介绍）。而且我相信你使用top来摆脱空白，但我们稍后会解决这个问题。

接下来，我们转到ul标记。移除position:relative;，transform:translateY(-50%);和top:50%;。然后添加margin:0;和padding:20px 0。我可以告诉您，您尝试使用position将ul置于.bar div中。我们通过添加padding来处理这个问题。我删除了margin，因为ul标记已内置边距，您想删除它，或者您将拥有空格。

最终触摸是li标记。我只需将display: inline;更改为display: inline-block，即可使ul填充有效。

这仅适用于您添加到帖子中的代码，不了解您链接的其他问题，可能需要代码。希望这有帮助！

EDITED

body {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: 'Helvetica';
    background-color: #E6E6E6;
}


.bar {
    background-color:#333333;
    width:100%;
    text-align:center;
}

.bar ul {
    margin: 0;
    padding: 20px 0;
}


.bar li {
    display:inline-block;
    color:white;
    font-style:Verdana;
    text-align:center;
    font-size:2em;
    font-family:'Raleway';
    margin:10px;
    padding:10px;
}

.bar a {
    text-decoration:none;
    color:white;
}

空格html

1 个答案: