【发布时间】：2013-11-28 22:28:39
【问题描述】：
我有一些 PHP 脚本，其中包含 HTML 中的回显输出，我想使用 CSS 文件设置样式。我已经放置了正确的 div 和 span 类，理论上它们应该从 CSS 文件中调用并正确设置样式。只是它们似乎不是，我无法理解为什么。
文本样式看起来不错，但它的填充搞砸了。我已经粘贴了下面的代码：
<?php
// How Many Topics you want to display?
$topicnumber = 5;
// Change this to your phpBB path
$urlPath = "/forum";
// Database Configuration (Where your phpBB config.php file is located)
include 'forum/config.php';
$table_topics = $table_prefix. "topics";
$table_forums = $table_prefix. "forums";
$table_posts = $table_prefix. "posts";
$table_users = $table_prefix. "users";
$link = mysql_connect("$dbhost", "$dbuser", "$dbpasswd") or die("Could not connect");
mysql_select_db("$dbname") or die("Could not select database");
$query = "SELECT t.topic_id, t.topic_title, t.topic_last_post_id, t.forum_id, p.post_id, p.poster_id, p.post_time, u.user_id, u.username
FROM $table_topics t, $table_forums f, $table_posts p, $table_users u
WHERE t.topic_id = p.topic_id AND
f.forum_id = t.forum_id AND
t.forum_id != 4 AND
t.topic_status <> 2 AND
p.post_id = t.topic_last_post_id AND
p.poster_id = u.user_id
ORDER BY p.post_id DESC LIMIT $topicnumber";
$result = mysql_query($query) or die("Query failed");
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
echo "<article><figure><img src='voxis-template/HTML & CSS/img/gaming12.jpg' alt='' /></figure><div class='text'><h3><a href=\"$urlPath/viewtopic.php?f=$row[forum_id]&t=$row[topic_id]&p=$row[post_id]#p$row[post_id]\" TARGET=\"_blank\"></h3></div>" .
$row["topic_title"] .
"<span class='info'></a></td></font></b><td><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><font color=\"#C0C0C0\"> by: <a href=\"$urlPath/memberlist.php?mode=viewprofile&u=$row[user_id]\" TARGET=\"_blank\"></span>" .
$row["username"] .
"</td><td><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><font color=\"#C0C0C0\">" .
date('F j, Y, g:i a', $row["post_time"]) .
"</td></tr></font></article>";
}
mysql_free_result($result);
mysql_close($link);
?>
以下是其包装 Div 中的相同代码
<div class='span4 article-box'>
<div class='box-title'>
<h2>Forum Posts </h2>
<div class='title-line'></div>
</div>
<article class='first-child'>
<figure>
<img src="voxis-template/HTML & CSS/img/gaming01.jpg" alt="" />
</figure>
<div class='text'>
<h3><a href="forum/viewtopic.php?f=17&t=8">Improve your landings with our ILS Training tips posted on the forum. Get your landings under 200fpm!</a></h3>
<span class='info'>Mon Jan 07, 2013 11:05 pm</span>
</div>
</article>
<article>
<figure>
<img src="voxis-template/HTML & CSS/img/gaming02.jpg" alt="" />
</figure>
<div class='text'>
<h3><a href="forum/viewtopic.php?f=2&t=92">ORBX Global Scenery is out! See the world in stunning photorealism. </a></h3>
<span class='info'>Sat Jul 27, 2013 3:38 am</span>
</div>
</article>
<article>
<figure>
<img src="voxis-template/HTML & CSS/img/gaming03.jpg" alt="" />
</figure>
<div class='text'>
<h3><a href="forum/viewtopic.php?f=7&t=74">Pilots take to the skies in an "around the world" flight.</a></h3>
<span class='info'>Tue Jun 18, 2013 10:38 am</span>
</div>
</article>
<article>
<figure>
<img src="voxis-template/HTML & CSS/img/gaming07.jpg" alt="" />
</figure>
<div class='text'>
<h3><a href="forum/viewtopic.php?f=10&t=75">Can you add a UK/Europe route please...</a></h3>
<span class='info'>Tue Jun 18, 2013 10:40 am</span>
</div>
</article>
<article>
<figure>
<img src="voxis-template/HTML & CSS/img/gaming08.jpg" alt="" />
</figure>
<div class='text'>
<h3><a href="forum/viewtopic.php?f=11&t=53">Please read the rules of the airline. They are designed to keep everything happy and harmonious...</a></h3>
<span class='info'>Wed Mar 06, 2013 9:46 am</span>
</div>
</article>
<article>
<figure>
<img src="voxis-template/HTML & CSS/img/gaming09.jpg" alt="" />
</figure>
<div class='text'>
<h3><a href="forum/viewtopic.php?f=2&t=94">New USA Hub announced at John F Kennedy International.</a></h3>
<span class='info'> Sat Aug 17, 2013 3:54 pm</span>
</div>
</article>
<article>
<figure>
<img src="voxis-template/HTML & CSS/img/gaming10.jpg" alt="" />
</figure>
<div class='text'>
<h3><a href="voxis-template/HTML & CSS/blog.html">Thoughts on changing flight management system. VAFS, FS Airlines or PHPVMS...</a></h3>
<span class='info'>Wed Jul 03, 2013 11:06 am</span>
</div>
</article>
<article>
<figure>
<img src="voxis-template/HTML & CSS/img/gaming11.jpg" alt="" />
</figure>
<div class='text'>
<h3><a href="forum/viewtopic.php?f=19&t=27">Blue Spirit's FS Open Session proves popular. We're up to 6th place in the rankings...</a></h3>
<span class='info'>Thu Jan 17, 2013 10:53 pm</span>
</div>
</article>
<article>
<figure>
<img src="voxis-template/HTML & CSS/img/gaming12.jpg" alt="" />
</figure>
<div class='text'>
<h3><a href="forum/viewtopic.php?f=23&t=67">New CRJ700 added to the fleet.</a></h3>
<span class='info'>Wed Jun 05, 2013 10:57 am</span>
</div>
</article>
<?php
// How Many Topics you want to display?
$topicnumber = 5;
// Change this to your phpBB path
$urlPath = "/forum";
// Database Configuration (Where your phpBB config.php file is located)
include 'forum/config.php';
$table_topics = $table_prefix. "topics";
$table_forums = $table_prefix. "forums";
$table_posts = $table_prefix. "posts";
$table_users = $table_prefix. "users";
$link = mysql_connect("$dbhost", "$dbuser", "$dbpasswd") or die("Could not connect");
mysql_select_db("$dbname") or die("Could not select database");
$query = "SELECT t.topic_id, t.topic_title, t.topic_last_post_id, t.forum_id, p.post_id, p.poster_id, p.post_time, u.user_id, u.username
FROM $table_topics t, $table_forums f, $table_posts p, $table_users u
WHERE t.topic_id = p.topic_id AND
f.forum_id = t.forum_id AND
t.forum_id != 4 AND
t.topic_status <> 2 AND
p.post_id = t.topic_last_post_id AND
p.poster_id = u.user_id
ORDER BY p.post_id DESC LIMIT $topicnumber";
$result = mysql_query($query) or die("Query failed");
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
echo "<article><figure><img src='voxis-template/HTML & CSS/img/gaming12.jpg' alt='' /></figure><div class='text'><h3><a href=\"$urlPath/viewtopic.php?f=$row[forum_id]&t=$row[topic_id]&p=$row[post_id]#p$row[post_id]\" TARGET=\"_blank\"></h3></div>" .
$row["topic_title"] .
"<span class='info'></a></td></font></b><td><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><font color=\"#C0C0C0\"> by: <a href=\"$urlPath/memberlist.php?mode=viewprofile&u=$row[user_id]\" TARGET=\"_blank\"></span>" .
$row["username"] .
"</td><td><font face=\"Verdana, Arial, Helvetica, sans-serif\" size=\"1\"><font color=\"#C0C0C0\">" .
date('F j, Y, g:i a', $row["post_time"]) .
"</td></tr></font></article>";
}
mysql_free_result($result);
mysql_close($link);
?>
</div>
您可以查看实时示例here。如果您向下看页面的左侧，您会看到一些静态帖子，然后是列表底部的 php 调用的。如果您查看图像，您会明白我所说的填充或边距是什么意思。
我不知道出了什么问题，我希望其他人可以。似乎没有正确拉出或引用 CSS？
谢谢
安迪
【问题讨论】：
-
看看你的链接，在静态中它们在 h3 内部，在 php 中它们在 h3 之后（在 h3 内部也是一个空的）。在 chrome 或 firebug 中使用元素检查器，“美化” html 会更容易看到问题
-
如果您费心查看渲染的源代码，您会发现哪里出错了。当您需要遵守您的课程时，为什么要添加内联 css。
-
您生成的内容中也有表格标签（'
, '），这些标签不存在于您的静态内容中 仅供参考：您是否使用内联样式属性或类在 PHP 生成的内容中进行样式设置并不重要！浏览器不知道发送到浏览器的 html 内容是如何生成的，如果它是静态文件、PHP 脚本、ASP 脚本、perl 等等……查看您呈现的 HTML。将其与 PHP 不输出的现有 HTML 进行比较。修复 PHP 脚本，使结构与所需的输出相同（您现在的输出是一团糟，不反映您的代码结构）。 CSS 可以正常工作，这里的问题是你的标记很糟糕，所以选择器没有针对预期的元素。