Question

我的标记中有两个元素，一个地图和一个无序列表：

<div id="map-se">

<ul class="sverige">
<li class="se1"><a href="#blekinge">Blekinge län</a></li>
<li class="se2"><a href="#dalarnas">Dalarnas län</a></li>
<li class="se3"><a href="#gavleborgs">Gävleborgs län</a></li>


 </ul>
 </div>

HERE是链接，我想要做的是切换它们之间的位置，我的意思是右边的地图和左边的无序列表。无论我做什么，地图都将被打破。一些建议？

Answer 1

通过列表上的简单绝对定位可以轻松解决定位问题。只需使用：

.map-visible-list {
   bottom: 0;
   position: absolute;
   right: 0;
}

您可以将列表放在任何您想要的位置。地图容器已经绝对定位，因此您可以将整个容器移动到需要移动地图的位置，然后根据需要重新定位可见列表。请记住，您可以使用顶部，底部，右侧或左侧。此外，您还可以在位置上设置负值，以便在需要时将列表移动到地图容器边界框之外。

这没什么特别的，但可预测，可靠，省时，而且有效！

Answer 2

通过更改该网站上的一些内容，这似乎是您正在寻找的内容。更改列出元素的顺序。所以列表首先出现，然后是地图第二个：

    <ul class="map-visible-list"></ul>
    <ul class="sverige css-map"></ul>
    <span class="cities sverige-cities"></span>

然后在你的CSS中：

    .cities.sverige-cities {
        margin-left: 180px;
    }

Answer 3

我刚刚将地图显示在其父级之前，并将margin-left添加到css-map-container

<div id="main" role="main">
    <ul class="map-visible-list">...Your Stuff..</ul>
        <div id="map-se" class="css-map-container m430">
            <ul class="sverige css-map">....Your stuff...</ul>
            <span class="map-loader" style="left: 50%; margin-left: -49.5px; margin-top: -16px; top: 472.5px; display: none; ">Loading ...</span><span class="cities sverige-cities"></span>
        </div>
</div>

无序列表css定位

3 个答案: