Listcontent自定義對齊問題

我嘗試了很多東西，但沒有什麼效果很好。我想得到像「Sympany Hauptsitz」中心和南KM這樣的文本有點不利。

如何從文本更改位置？

這是我的問題的圖片。

enter image description here

我有這個源代碼：

這裏我的源代碼：

<section id="listview"> 
<ul class="liste"> 

</ul> 
</section> 

<script> 
//laden der json datei und befüllen der Tabelle 
$.getJSON('faddress.json', function(json){ 
var erg = json; 
$.each(json, function(i, daten){ 
//Kartenausschnitt 
var ausschnitt = 'http://maps.googleapis.com/maps/api/staticmap?size=50x50&markers=color:blue|size:tiny|'+daten.Position.Latitude+','+daten.Position.Longitude+'&sensor=true'; 

$('#listview').find('ul.liste').append('<li><img src="'+ausschnitt+'">'+ i +'<span>'+ entfernungBerechnen(mylongitude,mylatitude,daten.Position.Longitude,daten.Position.Latitude)+'</span></li>'); 
}); 
}); 
</script>

這Sytelsheet：

ul.liste { 
padding: 0; 
margin: 9px; 
list-style: none; 
border: 1px solid #a1a7ad; 
border-radius: 8px; 

font-weight: bold; 
box-shadow: 0 1px 0 #fff; 
} 

ul.liste li { 
background: #f7f7f7; 
border-top: 1px solid #fdfdfd; 
border-bottom: 1px solid #cacaca; 
padding: 5px 10px; 
line-height: 30px; 
font-size:12px; 
height: 50px; 
} 

ul.liste li:first-child { 
border-top-left-radius: 8px; 
border-top-right-radius: 8px; 
border-top-color: #e5e5e5; 
} 

ul.liste li:last-child { 
border-bottom-left-radius: 8px; 
border-bottom-right-radius: 8px; 
} 

ul.liste li span { 
float: right; 
display: block; 
color: #999; 
font-weight: normal; 
}

來源

2012-11-22 DevJam

我不能在所有複製你的頁面。你正在使用哪個JavaScript庫？ –

的造型列表中的＃1規則：

在A -tag上使用display:block，並將所有非位置樣式放在A標籤上，而不是LI。

對於李只使用：display:position:和float:，其餘的推移A.

來源

2012-11-22 15:44:10

Sry？你用a_tag表示什麼意思？我已經嘗試顯示pos並將其拖動到dowsnt非常好的工作..... – DevJam

不要樣式列表 - 樣式列表的CONTENTS。風格的鏈接，而不是包裝。 –

您可能會發現將圖像應用到鏈接的背景並使用填充更容易：左移動文本，而不是使用img標記。 –

Listcontent自定義對齊問題

回答

相關問題