Question

我是第一次尝试建立网站，而且我在设置布局方面遇到了一些麻烦。

我希望图片链接（以及我尝试放在页面上的任何其他内容）显示在我的菜单右侧而不会中断它。它似乎总是出现在它下面或插入徽标图像和菜单之间。任何帮助将不胜感激。

有问题的页面如下所示......请原谅可能写得不好的HTML。

＆＃13;

  .vertical-menu {
  width: 200px;
}

.vertical-menu a {
  background-color: #eee;
  color: black;
  display: block;
  padding: 12px;
  text-decoration: none;
}

.vertical-menu a:hover {
  background-color: #ddd;
}

.vertical-menu a.active {
  background-color: #ccc;
  color: white;
}

div.spacer {
  font-size: 0;
  height: 0px;
  line-height: 0;
}

div {
  border: 0px solid black;
  margin-top: 50px;
  margin-bottom: 50px;
  margin-right: 50px;
  margin-left: 50px;
  background-color: white;

＆＃13;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

  <center>
    <h1 style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif;">music etc.</h1>
  </center>

  <div class=“panel”>
    <left>
      <img src=img/glassparklogodraft1yellow.png height=215 width=215>
    </left>

  </div>

  <div class="spacer"></div>

  <div class=“panel”>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </div>

  <body>

    <div class="vertical-menu">
      <a style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif;" href=main.html>home</a>
      <a style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif;" href=magazine.html>magazine</a>
      <a style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif;" href=visual.html>visual content</a>
      <a style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif;" href=audio.html>audio</a>
      <a style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif;" href=contact.html>contact</a>
    </div>


  </body>

  <body>
    <center>
      <p>2nd floor - the fabled sound
        <p>

          <a href=gpmaudio/2ndfloorthefabledsound.zip download>

            <img src=img/fabledsoundcover.png width=200 height=200>

          </a>
    </center>
  </body>

  <div class=“spacer”></div>

  <body>
    <center>
      <p>2nd floor - the lebron bonus
        <p>

          <a href=gpmaudio/2ndfloorthelebronbonus.zip download>

            <img src=img/lebronbonuscover.jpg width=200 height=200>

          </a>
    </center>
  </body>

</html>

＆＃13;

Answer 1

将CSS属性position添加到vertical-menu类并将其设置为absolute

.vertical-menu {
    position: absolute;
}

在W3C或MDN上找到有关CSS位置属性的更多信息。

似乎无法在我的垂直导航菜单旁边显示图像，文字等

1 个答案: