パーセンテージ値を使用して、リスト項目内にアンカーを相対的に配置したいと考えています。
私はこのデザインでこれをやろうとしています: http://bit.ly/1awA1Hh
現在、FF、Chrome、および IE で動作しますが、Safari/WebKitでは動作しません。
私が達成しようとしていることのフィドルを含めました。WebKit で動作するようで、サイトに何かが欠けています。
サイト上の親要素が配置に干渉することは私には意味がありません...
誰でも簡単に見てくれませんか?
サイト: http://bit.ly/1awA1Hh フィドル: http://jsfiddle.net/y7Juf/1/
HTML:
<ul>
<li>
<a href="">Hello, World!</a>
</li>
<li>
<a href="">Hello, World!</a>
</li>
<li>
<a href="">Hello, World!</a>
</li>
</ul>
CSS:
ul li a {
position: relative;
top: 60%;
}
ul li {
width: 200px;
height: 100%;
border-right: 1px solid #CCC;
float: left;
text-align: center;
}
ul {
height: 20%;
list-style-type: none;
}
html, body {
height: 100%;
}