0

我正在编写以下列表，即使文本由多行组成，它也会在大写字母和文本之间保持距离。现在大写字母和以下文本不在同一行，尤其是在使用 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>
4

1 回答 1

0

现在定义您的 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
}

演示

于 2012-12-10T09:38:38.743 回答