0

我是 html、css 的新手，我正在尝试为移动应用程序做一个菜单，其中包含一些彼此相邻的垂直对齐的图像，我想在这些图像上叠加一些文本。例如，假设一个体育信息相关应用的主菜单，它包含 5 个背景图像，足球图像、篮球图像、高尔夫图像……每个图像的底部都有文字。

为了解决这个问题，我制作了以下 html 代码：

<body onload="onBodyLoad()">
    <div id="cabecera">

        <h1></h1>
    </div>
    <div id="menu-opciones">
        <div class="opcion-menu">
            <img src="../img/tarta.jpg" alt="">
            <a href="./web/Acercade.html"></a>
            <h2><span>Sobre txorierri y Erandio</span></h2>
        </div>
        <div class="opcion-menu">
            <img src="../img/tarta.jpg" alt="">
            <a href="./web/LugaresDeInt.html"></a>
            <h2><span>Lugares de interes</span></h2>
        </div>
        <div class="opcion-menu">
            <img src="../img/tarta.jpg" alt="">
            <a href="./web/DondeComer.html"></a>
            <h2><span>Dónde comer</span></h2>
        </div>
        <div class="opcion-menu">
            <img src="../img/tarta.jpg" alt="">
            <a href="./web/DondeDormir.html"></a>
            <h2><span>Dónde dormir</span></h2>
        </div>
        <div class="opcion-menu">
            <img src="../img/fronton.jpg" alt="">
            <a href="./web/TiempoLibre.html"></a>
            <h2><span>Tiempo libre</span></h2>
        </div>
    </div>
</body>

这样我得到图像，然后是文本，然后是另一个图像，然后是另一个文本......所以通过 css 我重新定位了文本以覆盖每个图像。问题是现在我得到了之前文本所在的空白空间，我希望图像彼此相邻。摆脱那个空白空间的最佳方法是什么？请注意，由于这是针对移动应用程序，我想避免在 css 上使用像素，并尝试做所有相关的 %。

4

1 回答 1

0

不是 100% 确定你想要达到什么目标，但我认为你可以清理你的 html 并实现你想要的。您可以将每个列表项包装在一个中并获得相同的效果。例如：

<div class="opcion-menu">
            <img src="../img/tarta.jpg" alt="">
            <a href="./web/Acercade.html"></a>
            <h2><span>Sobre txorierri y Erandio</span></h2>
</div>

改成：

<div class="opcion-menu">
<a href="./web/Acercade.html"><img src="../img/tarta.jpg" alt=""><span>Sobre txorierri y Erandio</span></a>
</div>

然后设置 to position:relative 和 to position:absolute 以将其从文档流中取出。这也将消除该空白，您可以使用 left:-9999; 相对于您的图像定位或隐藏它；和不透明度：0；

希望对你有所帮助。

于 2013-09-16T17:30:39.077 回答