我已经创建了一个基于网络的电子学习模块。用户将使用 Web 浏览器查看和浏览模块。我有两个标记为“后退”和“下一步”的按钮,供用户通过该模块。每个页面上的所有内容都由 PHP 数组控制,以放置用户在页面上看到的文本。我的 HTML/PHP 代码是:
<div id="white">
<div id="header">
<img id="header_logo" src="./images/tfx_logo3.png" /img>
<div id="mod-title">
<div id="tab-shape"></div>
<h1><?php echo $module; ?></h1>
</div>
<div id="nav-bar">
<ul class="tabs">
<li><a href="./main_menu.php">Myths</a></li>
</ul>
</div>
</div>
<h2><?php echo $heading[$page-1]; ?></h2>
<div class ="ref">
<?php echo $ref[$page-1];?>
</div>
<div class="nav-btns">
<?php
if ($page != 1) {
echo '<a id="prev" href="' . $filename . '.php?page=' . ($page-1) . '">Back</a>';
}
if (!in_array($page+1, $progress_pages) && $page != $last_page) {
echo '<a id="next" href="' . $filename . '.php?page=' . ($page+1) . '">Next</a>';
}
else {
echo '<a id="next" href="progress_check.php?page=' . ($page+1) . '">Next</a>';
}
?>
</div>
我的问题是导航按钮“后退”和下一个出现在内容的顶部,如下所示:
我该如何解决这个问题?这是一个CSS问题吗? CSS 是
.ref{
width: 50%;
margin-left: auto;
margin-right: auto;
overflow-y: auto;
overflow-x: hidden;
border: 1px, solid #ccc;
padding: 0px 7px;
}
.nav-btns {
width: 100%;
position: absolute;
top:600px;
}
最佳答案
努力改变
.nav-btns {
width: 100%;
position: absolute;
top:600px;
}
到
.nav-btns {
width: 100%;
display: block;
}
让我知道结果!
关于html - 如何使用 CSS 移动带有 PHP 内容的 HTML div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55144195/