html - 如何避免文本和 map 在 css 中重叠？

Question

我在一个网站上工作，我在其中创建了一张 map ，该 map 计算与当前位置的距离。 map 工作正常。现在我想在下面添加一个文本，但由于某些原因它与 map 重叠。

fiddle 是 http://jsfiddle.net/b0zcw415/4/embedded/result

问题陈述:

我想知道我需要在 CSS 代码中进行哪些更改，无论我在 map 下方添加的文本都不应重叠。

我用来创建 map 的 HTML 代码是:

<div id="outer">

    <p id="distance_text"></p>

    <input type="text" name="location" value="Current Location">

    <br>

    <div id="map_div"></div>

</div>

Answer 1

问题是由于您的 CSS 告诉文本距元素 #outer 顶部 50px。

更改 CSS 选择器 #outer 中的以下行:

#outer {
    width: 400px;
    /* height: 50px; */
    margin: 0 auto;
    text-align: center;
}