如何在页面中间制作主要内容并消除空白？答案

【问题标题】：How to make main content in the middle of the page and remove white gaps?如何在页面中间制作主要内容并消除空白？
【发布时间】：2017-06-05 03:29:40
【问题描述】：

请帮忙，我需要右边栏上的空白区域消失，主要内容的位置放在页面中间。

我该怎么办？有什么建议吗？

这是我的网站：http://www.plebonline.co.uk

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px 18px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #ea730b;
}

.clock {
  color: white;
  text-align: center;
  padding: 16px 18px;
  display: block;
}

.leftbar {
  float: left;
  background-color: #333;
  width: 10%;
  margin: 0;
  padding: 1em;
  margin-bottom: -5000px;
  padding-bottom: 5000px; 
  overflow: hidden;
}

.rightbar {
  float: right;
  background-color: #333;
  width: 10%;
  margin: 0;
  padding: 1em;
  margin-bottom: -5000px;
  padding-bottom: 5000px; 
  overflow: hidden;
}

.maincontent {
  padding: 0;
  float:left;
  margin-left: 10%;
  margin-right: 10%;
  background-color: #ff00ff;
  width: 80%;
}

<ul>
  <li><a class="active" href="index.html">Home</a></li>
  <li><a href="wip.html">Projects</a></li>
  <li><a href="wip.html">Notes</a></li>
  <li><a href="wip.html">About</a></li>
  <li><a href="wip.html">Contact</a></li>
  <li style="float:right" class="clock" id="clock"></li>
  <script>
    var today = new Date();
    document.getElementById('clock').innerHTML=today;
  </script>
</ul>

<div class="leftbar"></div>

<div class="maincontent"></div>

<div class="rightbar"></div>

【问题讨论】：

什么空白？内容似乎在中间，您似乎在左栏、内容和右栏之间没有空白
主要内容似乎与右侧栏重叠。 @AlexandruSeverin

标签： html css whitespace removing-whitespace

【解决方案1】：

我注意到您没有将右栏和左栏放在任何 div 中。在我的代码中，我删除了左右栏。如果你想要它们，你可以调整代码。

最好添加一些容器来容纳所有元素。如您所见，标题和主要内容位于 div 类 .container 中。

希望对您有所帮助。

html,body {
    margin:0;
    padding:0;
    height: 100%;

/* 
* The container which hold the header and the main content 
*/
.container {
    width:100%;
    position: absolute;
    height:1200px;
    background:#333;
    }

/* 
* Header which contain your menu and date 
*/
.header {
    width:100%;
    }

/* 
* The main content of your site 
*/
.maincontent {
    width:80%;
    max-width:1000px;
    background-color: #fff;
    float:left;
    left:50%;
    height:100%;
    margin-left:-500px;
    position: absolute;
    }

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    }

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px 18px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #ea730b;
}

.clock {
    color: white;
    text-align: center;
    padding: 16px 18px;
    display: block;
}

</style>

<body>
<div class="container">
<div class="header">
<ul>
  <li><a class="active" href="index.html">Home</a></li>
  <li><a href="wip.html">Projects</a></li>
  <li><a href="wip.html">Notes</a></li>
  <li><a href="wip.html">About</a></li>
  <li><a href="wip.html">Contact</a></li>
  <li style="float:right" class="clock" id="clock"></li>
  <script>
    var today = new Date();
    document.getElementById('clock').innerHTML=today;
  </script>
</ul>
</div>

<div class="container">
<div  class="maincontent">
<h1>This is the content</h1>
</div>
</div>
</body>

【讨论】：

我怎样才能让它的主要内容填充在条形之间。我想我会问你是一个 CSS 向导

【解决方案2】：

有一个 div 标签关闭而不打开可能导致问题。

变化：

<div class="leftbar"></div>

<div class="maincontent"></div>

</div>
<div class="rightbar"></div>

收件人：

 <div class="leftbar"></div>

    <div class="maincontent"></div>

    <div class="rightbar"></div>

【讨论】：