Question

我不是前端开发人员所以我怀疑我可能会遗漏一些非常基本的东西。然而，我无法找到解决方案。我有一个div元素，我只想在顶部应用一些padding，这样它就不会干扰标题。我环顾四周，看到边缘崩溃的类似问题，但我不认为是这种情况，因为我在处理两个不相互封闭的div tot-header和{{1}这是我到目前为止所写的内容。

content

和css

<!DOCTYPE html>
<html>
    <head>
        <title>Blogologo</title>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link href="css/head.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <div class="tot-header">
            <div class="page-header">
                <h1>Blogologo</h1>
            </div>
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <ul class="nav navbar-nav">
                      <li class="active"><a href="#">Home</a></li>
                      <li><a href="#">Racconti</a></li>
                      <li><a href="#">Rubriche</a></li> 
                      <li><a href="#">Pesce fritto e baccal&#224;</a></li> 
                    </ul>
                </div>
            </nav>
        </div>
        <div class="content">
            <div class="container">
                <div class="row">                          
                    <div id="central" class="col-md-8">
                        Preview
                    </div>
                    <div id="side" class="col-md-4">
                        <ul class="side-menu">
                          <li><a href="#">Home</a></li>
                          <li><a href="#">Racconti</a></li>
                          <li><a href="#">Rubriche</a></li> 
                          <li><a href="#">Pesce fritto e baccal&#224;</a></li> 
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

然而，填充似乎不起作用。有什么想法吗？

Answer 1

您使用的浏览器是什么？从我可以看到它似乎完美的工作。由padding-top div的.content引起的两个div之间存在巨大的空间。这是你的滚动，因为你的顶部标题有一个固定的位置。

这是你的代码：

http://codepen.io/anon/pen/WweMPG?editors=1100

＆＃13;

.tot-header {
  position: fixed;
  top: 0px;
  width: 100%;
  text-align: center;
}

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.content {
  padding-top: 10cm;
}

＆＃13;

<div class="tot-header">
  <div class="page-header">
    <h1>Blogologo</h1>
  </div>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Racconti</a></li>
        <li><a href="#">Rubriche</a></li>
        <li><a href="#">Pesce fritto e baccal&#224;</a></li>
      </ul>
    </div>
  </nav>
</div>
<div class="content">
  <div class="container">
    <div class="row">
      <div id="central" class="col-md-8">
        Preview
      </div>
      <div id="side" class="col-md-4">
        <ul class="side-menu">
          <li><a href="#">Home</a></li>
          <li><a href="#">Racconti</a></li>
          <li><a href="#">Rubriche</a></li>
          <li><a href="#">Pesce fritto e baccal&#224;</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

＆＃13;

在我看来代码完美无缺。你期望它看起来像什么？

Answer 2

删除

position:fixed;

并更改您的.content css

从padding-top:10cm;到padding-top:10px;

Answer 3

在你的CSS中你可以尝试使用像素代替cm，例如

.content {
    padding-top: 100px;
}

您也可以尝试使用边距而不是填充，例如

.content {
    margin-top: 100px;
}

并提供更多填充或保证金，直到您的内容出现

填充不适用于div

3 个答案: