Question

以下是我的网页的以下html和CSS代码。我似乎无法将标题div置于标题div内。我很困惑这个问题是由于定位还是显示。感谢。

＆＃13;

#header {
  position: absolute;
  position: block;
  width: 100%;
  height: 120px;
  background-color: #3e8dff;
  text-decoration: underline;
  top: 0px;
  left: 0px;
}
#image {
  height: 120px;
  width: 150px;
  float: left;
}
#image a img {
  position: absolute;
  height: 120px;
  width: 150px;
}
#navBar {
  position: absolute;
  width: 1500px;
  height: 60px;
  background-color: #96CDCD;
  top: 120px;
  left: -15px;
}
#navBar ul li {
  position: relative;
  list-style-type: none;
  float: left;
  display: inline-block;
  border: 2px solid black;
  padding: 5px;
  margin-right: 50px;
  margin-left: 50px;
  font-family: Arial;
  font-size: 1.5em;
  bottom: 5px;
  background-color: blue;
}
#top_left {
  float: left;
  position: absolute;
  top: 190px;
  left: 0px;
  width: 48%;
  height: 500px;
  border-radius: 5px;
  background-color: #00FA9A;
}
#top_right {
  float: right;
  position: absolute;
  top: 190px;
  width: 50%;
  right: 0px;
  height: 500px;
  border-radius: 5px;
  background-color: #40E0D0;
  opacity: .7;
}
#bot_left {
  position: absolute;
  clear: both;
  height: 500px;
  width: 48%;
  border-radius: 5px;
  background-color: yellow;
  top: 700px;
  left: 0px;
}
#bot_right {
  position: absolute;
  float: right;
  height: 500px;
  width: 50%;
  border-radius: 5px;
  background-color: purple;
  top: 700px;
  right: 0px;
}
.simplePar {
  display: inline-block;
  font-size: 26px;
  font-family: Tahoma;
}
#title {
  position: absolute;
  display: inline-block;
  margin: auto;
  height: 90px;
  width: 500px;
  background-color: purple;
}

＆＃13;

<!Doctype html>
<html>

<head>
  <title>Page 1</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

  <div id="header">

    <div id="image">
      <a href="http://google.com/">
        <img src="C:\Users\Raiyan\Desktop\files for website\google-logo.jpg">
      </a>
    </div>
    <div id="title">
      pasa
    </div>
  </div>

  <div id="navBar">
    <ul>
      <li>Home</li>
      <li>Latest News</li>
      <li>Buy Tickets</li>
      <li>Blog</li>
      <li>More Info</li>
      <li>Contact us</li>
    </ul>
  </div>


  <div id="top_left">
    <p class="simplePar">All of these are under the <span>divs</span>
    </p>

  </div>
  <div id="top_right">
    <p class="simplePar">All of these are under the <span>divs</span>
    </p>
  </div>
  <div id="bot_left">
    <p class="simplePar">All of these are under the <span>divs</span>
    </p>
  </div>
  <div id="bot_right">
    <p class="simplePar">All of these are under the <span>divs</span>
    </p>
  </div>

  <div id="footer"></div>



</body>

</html>

＆＃13;

Answer 1

对于这样一个简单的结构，你有太多的div和样式。当然，这可以通过多种方式完成，这里有一个方法：

<div id="header">
  <a href="http://google.com/"><img id="image" src="https://upload.wikimedia.org/wikipedia/commons/a/a2/Example_logo.jpg"></a>
  <span>pasa</span>
</div>

#header { 
    text-align:center;
    line-height: 120px;
    font-size:24px;
}

#image
{
    height: 120px;
    width: 150px;
    position:absolute;
    left:0;
}

如果您想要的是标题以图像后面的剩余空间为中心（而不是在页面本身居中），那么只需删除位置：绝对样式并将float：left放置。

您应该简化标记，然后您的样式规则将更容易理解（适用于您和浏览器......）。您还有以下错误：

 position: block;

不存在。

Answer 2

将#title设置为内联，然后给它一个text-align of center：

＆＃13;

<!Doctype html>
<html>

<head>
  <title>Page 1</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

  <div id="header">

    <div id="image">
      <a href="http://google.com/">
        <img src="C:\Users\Raiyan\Desktop\files for website\google-logo.jpg">
      </a>
    </div>
    <div id="title">
      pasa
    </div>
  </div>

  <div id="navBar">
    <ul>
      <li>Home</li>
      <li>Latest News</li>
      <li>Buy Tickets</li>
      <li>Blog</li>
      <li>More Info</li>
      <li>Contact us</li>
    </ul>
  </div>


  <div id="top_left">
    <p class="simplePar">All of these are under the <span>divs</span>
    </p>

  </div>
  <div id="top_right">
    <p class="simplePar">All of these are under the <span>divs</span>
    </p>
  </div>
  <div id="bot_left">
    <p class="simplePar">All of these are under the <span>divs</span>
    </p>
  </div>
  <div id="bot_right">
    <p class="simplePar">All of these are under the <span>divs</span>
    </p>
  </div>

  <div id="footer"></div>



</body>

</html>

＆＃13;

C:\Users\xxx\AppData\Local\Programs\Python\Python35-32\python.exe C:\Users\xxx\AppData\Local\Programs\Python\Python35-32\python.exe C:/Users/xxx/PycharmProjects/xxxxx/run.py
File "C:\Users\pli\AppData\Local\Programs\Python\Python35-32\python.exe", line 1
SyntaxError: Non-UTF-8 code starting with '\x90' in file C:\Users\pli\AppData\Local\Programs\Python\Python35-32\python.exe on line 1, but no encoding declared; see http://python.org/dev/peps/pep-0263/ for details

Process finished with exit code 1

＆＃13;

Answer 3

div#title的位置设置为绝对值。 margin: 0 auto不适用于绝对定位元素，因为它们脱离了上下文。

Answer 4

更改#title {display：block;位置：相对;} 你正在通过innerhitteng阻止上层，ans位置绝对不会像之前的@Paul那样在消息中工作!!!

为什么没有保证金：自动标签适用于＆＃34;标题＆＃34; DIV？

4 个答案: