列出大写字母和负边距

Question

我编写以下列表，即使文本由多行组成，也保持大写字母和文本之间的距离。现在大写字母和以下文本不在同一行，特别是在使用Safari mobile或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 id display:inline-block;或删除否定边距并定义锚标记< / strong> 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 的