Question

快速说明：我昨天刚刚开始学习HTML，这对我来说是非常新的所以请不要太苛刻 - 如果有人看到任何代码可以用更简单的方式完成或有任何随机的建议除了我要求之外，请不要犹豫，分享。我有一种感觉这是非常简单的脚本，这个网站更多的是帮助我学习HTML而不是实际使用，所以有一些领域我只是使用反复试验来使某些事情有效，因此你可能会看到不必要的代码在四处。如果它让你烦恼的话也要指出它！

无论如何，到了帖子的位置。我希望在div.contentbg里面有div.textbox，其中margin-top：15px。然而，当我尝试这个时，它会将余量应用于div.contentbg而不是div.textbox ...它可能是非常愚蠢的东西。有帮助吗？提前致谢！：D

以下是网站：http://jsfiddle.net/gbk8zhwv/1/embedded/result/

以下是代码：

<html> <title>JBROblivion</title> <head> <style> * {
  margin: 0;
  padding: 0;
}
body {
  background-color: black;
  margin: 0px;
  padding: 0px !important;
  height: 100%;
}
a {
  margin: 0;
  padding: 0;
}
img {
  display: block;
  margin: 0;
  padding: 0;
}
div.contentbg {
  background-color: #660000;
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
div.textbox {
  width: 90%;
  margin: 0px auto;
}
div.lrmipsm {
  width: 500px;
}
#nav {
  width: 100%;
  float: left;
  margin: 0;
  padding: 0;
  background-color: #5C0000;
  border-bottom: 2px solid #853333;
}
#nav ul {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  width: 1000px;
}
#nav li {
  float: left;
}
#nav li a:link,
a:visited {
  display: block;
  padding: 15px;
  width: 170px;
  text-decoration: none;
  font-weight: bold;
  color: #000000;
  background-color: #5C0000;
  text-align: center;
  text-transform: uppercase;
  font-family: "Century Gothic", Arial, Helvetica, sans-serif;
}
#nav li a:hover,
a:active {
  background-color: #520000;
}
h1.centre {
  font-family: "Century Gothic", Arial, Helvetica, sans-serif;
  text-align: center;
  text-transform: uppercase;
}
p.introblock {
  font-family: "Century Gothic", Arial, Helvetica, sans-serif;
}
</style> </head>

<body>

  <img src="http://yt3.ggpht.com/-HKi7fjQseQ0/VJzF49SbsxI/AAAAAAAAAJI/zbpOKJ0Uy0E/w2120-fcrop64=1,00005a57ffffa5a8-nd/Channel%2BArt%2BMask.jpg" alt="Banner" width="100%">

  <div id="nav">
    <ul>
      <li><a href="default.htm">Home</a></li>
      <li><a href="about.htm">About</a></li>
      <li><a href="milestones.htm">Milestones</a></li>
      <li><a href="shop.htm">Shop</a></li>
      <li><a href="https://www.youtube.com/user/JBROblivion" target="_blank">Youtube</a> </li>
    </ul>
  </div>

  <div class="contentbg">
    <div class="textbox">

      <h1 class="centre">Intro</h1>
      <br>
      <div class="lrmipsm">
        <p class="introblock">Lorem ipsum... sample text.
        </p>
      </div>
    </div>
  </div>
</body>

Answer 1

它不起作用的原因是因为contentbg实际上没有任何自己的内容。请注意示例在运行它时它是如何工作的，因为第一个div中有内容。如果您删除＆＃34;这是一些内容＆＃34;它似乎不起作用，因为没有内容可以从哪里开始边缘化（缺乏一个更好的词）。

示例

＆＃13;
＆＃13;
div { background-color: yellow; } div.ex { background-color:red; margin-top: 40px; }
＆＃13;
<div>This is some content <div class="ex">This is some content on the inner div.</div> </div>
＆＃13;
＆＃13;
＆＃13;

如果你的div像你一样是空的，我会建议使用padding属性。这将使div保持原样，而是在你需要填充的div的内容周围产生一些填充。

想在内容div中添加文本框div

1 个答案: