css - 以大写字母和负边距列出

Question

我正在编写以下列表，即使文本由多行组成，它也能保持大写字母和文本之间的距离。现在大写字母和后面的文本不在同一行上，尤其是在使用不同的浏览器(如 Safari 移动版或 OSX Safari)查看时。我认为负 margin-top 是这里的问题。您有改进此代码的想法吗？非常感谢!

<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 id display:inline-block; 或 删除否定边距并根据您的设计定义您的 anchor 标记 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