2

こんにちは私はいくつかの順序付けられていないリストを含むコンテナを持っています。最後の順序付けされていないリストを下部の0マージンに設定したいです。これが私のコードと私が試したものと機能しないものです：

<ul id="updates">
              <li>Follow Zack's updates<br/>300 followers. Follows:</li>
              <li><a href="#"><img src="img/zack/update1.png" alt="update"/></a></li>
              <li><a href="#"><img src="img/zack/update2.png" alt="update"/></a></li>
              <li><a href="#"><img src="img/zack/update3.png" alt="update"/></a></li>
              <li><a href="#"><img src="img/zack/update4.png" alt="update"/></a></li>
              <li>+ <br/> 10</li>
          </ul>


<p> Site powered by zi<span>kio<span></p>
div#articles p{
   margin-top: auto;
   margin-bottom: 0
}
ul#updates{
   margin-top: auto;
   margin-bottom: 0;
}

pとul＃updatesの両方を、マージン0で下部に設定する必要があります。

*編集： *親はすでにposition：fixedに設定されているため、相対的な配置はオプションではありません

4

3 に答える 3

2

position:relative「含む」<div>に追加しposition:absolute; bottom:0;てから、あなた<ul>と<p>cssに追加します

于 2012-07-31T13:39:20.750 に答える
2

div.articleあなたのリストがちょうどセットのすべての子供であると仮定します

div.article {
   position: relative; /* after your edit: fixed is fine too */
   padding-bottom : /* enough to make room for last ul */
}

div.article > ul:last-child {
   position : absolute;
   bottom   : 0;
}
于 2012-07-31T13:39:46.773 に答える
1

このようなリストを使用する場合は、リストをゼロマージンとパディングにリセットしてから、リスト自体ではなく、リストのコンテンツのスタイルを設定することをお勧めします。

#updates, #updates li {
   margin:0;
   padding:0;
}

次に、リストアイテムについて：

#updates a {
   display:block;
   padding: ___ <-- insert your values
   margin: ___
}

また、インライン画像よりもUI要素にCSS背景を使用する方が適切な形式です。リスト内のリンクのサイズを画像サイズに対応するように設定し、画像をCSS背景として適用できます。

  #updates a {
       display:block;
       background-image:url(img/zack/update1.png);
       height: ___
       width: ___
       padding: ___ 
       margin: ___
    }
于 2012-07-31T13:39:54.053 に答える