0

私はタイル張りのナビゲーションを作成しています。必要なのは、タイルを埋めることですが、からのテキストはまだ右下の位置にあります。ただし、幅: 100%、高さ: 100% (li に対して) にすると、テキストが領域の左上にジャンプします。私はなぜこれが起こるのか知っています、私は全体のアイデアを理解していると思います.私が知らないのは、タイルを埋めながら強制的に右下に戻す方法です

コードは次のとおりです。

    #menu {
width: 900px;
float: right;
display: block;
margin:0;
padding:0;
}


#menu ul{
list-style:none;
display: block;
margin:0;
padding:0;
}

#menu ul li{
display:inline-block;
width: 146.5px;
height: 146.5px;
background-color: #1BA1E2;
position: relative;
}

#menu ul li a{
text-decoration: none;
color: #fff;
display: block;
padding-right:5px;
padding-top:5px;
width: 100%;
height: 100%;

そしてhtml：

      <div id="menu">
           <ul>
                <li><a href="#">pies</a></li>
                <li><a href="#">kot</a></li>
                <li><a href="#">czołg</a></li>
                <li><a href="#">ryba</a></li>
                <li><a href="#">yea</a></li>
                <li><a href="#">umc</a></li>

           </ul>
      </div>
4

2 に答える 2

2

li display: table-cell代わりに作ってinline-block;使うvertical-align: bottom

デモ

#menu ul li {
    width: 146.5px;
    height: 146.5px;
    background-color: #1BA1E2;
    position: relative;
    vertical-align: bottom;
    display:table-cell;
    text-align: right;
    border: 1px solid #000;
}

注: あなたの CSS は散らかっているので、少しクリーンアップしてください

于 2013-05-13T09:38:38.173 に答える
0

はい 可能です。（アンカータグ内に配置できます<p>）および次のCSSを使用して<p>

p{

   margin-top:125px;
   float:right;
}

デモは次のとおりです。

デモ

于 2013-05-13T09:35:54.580 に答える