时间戳

首页 > 解决方案 > 使用 CSS 在图像上显示表格

html - 使用 CSS 在图像上显示表格

问题描述

我想在横幅上显示这 3 个灰色按钮。我尝试的一切都没有奏效。

我现在的状态

它应该是什么样子

这是html代码：

    <nav>
         <img class="banner" src="img/Banner.png" alt="Banner">
         <table>
            <tr>
               <td>
                  <a href="index.html">Index</a>
               </td>
               <td class="separator">
                  
               <td>
                  <a class="active" href="seiteA.html">Seite A</a>
               </td>
               <td class="separator">
                  
               </td>
               <td>
                  <a href="seiteB.html">Seite B</a>
               </td>
            </tr>
         </table>
 </nav>

我是 HTML 和 CSS 的新手，所以我很感激任何帮助 :)

标签： htmlcssimage

解决方案

最佳实践：

  • 使用 a 进行导航不是一个好习惯，您可以使用/之类的<table>东西，如MDN 上的文档中所示，甚至可以在容器中使用 s。<ol><ul>nav<div>display:flex
  • 您可以将图像用作图像，background-image这样<nav>您就不必自己将导航元素放置在图像之上。

nav {
  position: relative;
  height: 100px;
  padding: 10px;
  background-image: url("https://picsum.photos/100");
}

ol {
  display: flex;
  justify-content: space-around;
  list-style: none;
}

li {
  padding: 5px;
  background: white;
}
<nav>
  <ol>
    <li><a href="#">Seite A</a></li>
    <li><a href="#">Seite B</a></li>
    <li>Seite B C</li>
  </ol>
</nav>

快速回答可帮助您继续使用当前拥有的东西：您可以制作nav一个相对定位的容器，并将absolute您的桌子放置在您想要的任何位置。

nav {
  position: relative;
}

img {
  display: block;
  height: 200px;
  background-color: dodgerblue;
}

table {
  position: absolute;
  top: 50px;
  left: 50%;
}
<nav>
  <img class="banner" src="img/Banner.png" alt="Banner">
  <table>
    <tr>
      <td>
        <a href="index.html">Index</a>
      </td>
      <td class="separator">

        <td>
          <a class="active" href="seiteA.html">Seite A</a>
        </td>
        <td class="separator">

        </td>
        <td>
          <a href="seiteB.html">Seite B</a>
        </td>
    </tr>
  </table>
</nav>

推荐阅读