0

すべてのリスト項目をマージンで区切られた親の下部に揃えるにはどうすればよいでしょうか。

position: absolute; を適用する場合 bottom: 0、すべての要素が下に揃えられますが、余白は破棄されます。

 #bars0 {
width: 472px;
height: 258px;
position: relative;
 }
 #bars0 li {
border: solid red 1px;
width: 30px;
height: 50px;
margin-right: 95px;
position: absolute;
    bottom: 0   
}

  <div id="bars0">
   <ul><!-- update: added ul -->
  <li></li>
  <li></li>
  <li></li> 
  <li></li>
  </ul>
  </div>
4

2 に答える 2

1

<li>を<ul>タグで囲んで絶対に配置できない理由は<ul>何ですか？そうすれば、内部のマージンを制御できます<li>か？

HTML：

<div id="bars0">
    <ul>
        <li></li>
        <li></li>
        <li></li> 
        <li></li>
    </ul>
</div>

CSS：

#bars0 {
    width: 472px;
    height: 258px;
    position: relative;
}

#bars0 ul {
    position: absolute;
    bottom: 0;
}

#bars0 li {
    border: solid red 1px;
    width: 30px;
    height: 50px;
    margin-right: 95px;
    vertical-align: bottom;
    display: block;
    float: left;
}

#bars0 li:last-child {
    margin-right: 0;
}

したがって： http：//jsfiddle.net/RYBFF/1/

コメントに関する最近のリクエストに対処するには：上記のように：last-childを使用して、リストの最後の項目からマージンを削除します<li>。

于 2013-02-11T20:43:04.030 に答える
0

私はあなたがこのようなことをしようとしていると思います:

<style type="text/css">
#container {
    position: relative;
    height:200px;
    border:1px solid red;
}
#bars{
    position:absolute;
    bottom: 5px;    
}
#bars ul li {
    float: left;
    min-width:100px;
}
</style>
<div id="container">
    <div id="bars">
        <ul>
            <li>Test</li>
            <li>Test 2</li>
        </ul>
    </div>
</div>

デモ用の jsFiddle を次に示します: http://jsfiddle.net/YYCZc/2/

于 2013-02-11T20:26:11.833 に答える