無序列表CSS定位

我有我的標記兩個元素，一張地圖和一個無序列表：無序列表CSS定位

<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是鏈接，我想要做的是切換它們之間的位置，我的意思是地圖在右邊，無序列表在左邊。無論我做的是地圖都會被打破。有些建議？

來源

2012-02-02 Cojocaru Daniel

從在該網站上更改一些東西，這似乎是你在找什麼。更改元素列出的順序。因此，該列表是第一位的，然後在地圖第二：

<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; 
    }

來源

2012-02-02 00:10:03 sinemetu1

我剛搬到地圖上可見其母公司之前，並添加利潤率左爲CSS-地圖-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>

來源

2012-02-02 00:24:41

您的定位問題很容易通過簡單的絕對定位解決。只需使用：

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

而且您可以將列表放置在任意位置。地圖容器已經絕對定位，因此您可以將整個容器移動到需要移動地圖的位置，然後根據需要重新定位可見列表。請記住，您可以使用頂部，底部，右側或左側。另外，如果需要，還可以在位置上設置負值以將列表移動到地圖容器邊界框之外。

這不是什麼幻想，但可預測，可靠，省時，它的工作原理！

來源

2012-02-02 06:51:54

無序列表CSS定位

回答

相關問題