用大寫字母和負邊距列表

Question

我正在編程下面的列表，它保留大寫字母和文本之間的距離，即使文本是由多行組成。現在大寫字母和以下文本不在同一行，特別是在使用不同瀏覽器（如Safari移動版或OSX Safari）進行查看時。我認爲這裏存在負利潤率問題。你有想法來改進這個代碼？提前感謝！

<style type="text/css"> 

ul { 
list-style: none; 
margin:10px 0px 0px 0px; 
padding: 0px; 
} 

ul li a { 
background-color: #F7F7F7; 
border: 1px solid #999999; 
color: #000000; 
display: block; 
font-size: 16px; 
margin-bottom: -1px; 
padding: 12px 12px; 
} 

ul li:first-child a { 
-webkit-border-top-left-radius: 8px; 
-webkit-border-top-right-radius: 8px; 
} 

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


#inside { 
margin:-22px 0px 0px 26px; 
} 

h1 { 
font-size: 20px; 
font-weight:bold; 
display:inline; 
} 

</style> 

<ul> 
<li><a href="#"><h1>A</h1><div id="inside">Some text</div></a></li> 
<li><a href="#"><h1>B</h1><div id="inside">Some text</div></a></li> 
<li><a href="#"><h1>C</h1><div id="inside">Some text</div></a></li> 
</ul> 

Answer 1

現在定義h1標籤和#inside iddisplay:inline-block;或刪除否定保證金和定義錨標記line-height根據您的設計。

用於這個CSS

ul { 
list-style: none; 
margin:10px 0px 0px 0px; 
padding: 0px; 
} 

ul li a { 
background-color: #F7F7F7; 
border: 1px solid #999999; 
color: #000000; 
display: block; 
font-size: 16px; 
padding: 12px 12px; 
    line-height:16px; // add this line 
    border-bottom:0; // add this line 
} 

ul li:first-child a { 
-webkit-border-top-left-radius: 8px; 
-webkit-border-top-right-radius: 8px; 
} 

ul li:last-child a { 
-webkit-border-bottom-left-radius: 8px; 
-webkit-border-bottom-right-radius: 8px; 
    border-bottom: 1px solid #999999; // add this line 
} 


h1, #inside { 
margin:0; // add this line 
    display:inline-block; // add this line 
    vertical-align:top; // add this line 
} 

h1 { 
font-size: 20px; 
font-weight:bold; 
    margin-right:5px; // add this line 
} 

Demo