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 に答える