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

我正在编写以下列表，即使文本由多行组成，该列表也保持大写字母与文本之间的距离。目前，大写字母和以下文本不在同一行上，尤其是在使用不同的浏览器（例如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>

最佳答案

现在定义您的h1标签和#inside id display: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

关于css - 以大写字母和负边距列出，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13798094/