98.214.131.200/index.php
<html>
<head>
<title>Peoria Triathlon Club</title>
<meta charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="nav">
<li><a href="http://tri-peoria.org">Home</a></li>
<li><a href="/forum">Forum</a></li>
<li><a href="/join">Join</a></li>
<li><a href="/members">Members</a></li>
<li><a href="/events">Events</a></li>
<li><a href="/training">Training</a></li>
<li><a href="https://www.facebook.com/groups/tripeoria/">Facebook</a></li>
<ab><a href="/about">Peoria Triathlon Club</a></ab>
</ul>
<ul id=main>
<p>Main</p>
</ul>
</body>
</html>
98.214.131.200/style.css
body {
background:#000 url(bg.jpg) center top no-repeat;
background-size: cover;
color: #c1c1c1;
font-family: Arial, Verdana, Helvetica, sans-serif;
margin:0;
}
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#main{
display:inline-block;
float:left;
}
如何让主 div 中的内容显示在背景图片下方，而导航栏仍位于顶部？ 当前代码可见http://98.214.131.200
最佳答案
将您的“主要”容器更改为
div而不是ul(除非您有令人信服的理由将其设为ul...你总是可以在你的主div中有一个ul。将
margin-top属性添加到您的#mainCSS 中，将其从导航栏中向下移动适当的量。
所以在 index.php 中:
<div id="main">
<p>Main</p>
</div>
在 style.css 中:
#main {
margin-top: 240px; /* Adjust as needed */
}
您可以从您的主 css 中转储 display: inline-block，并且您可能不需要 float:left，这取决于您的后续意图。
您可能还需要从 body 的 css 中删除 background-size: cover，否则图像可能会增长以覆盖您的主 div。
关于html - CSS使文字显示在图片下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12477550/