0

これは私がこれまでに作成したものです。最初のアイテムの高さを上げて、liその下の境界線を覆うようにしますul。

私のアプリでは、このアプローチを使用して「選択された」効果を作成したいと思います。これはJSなしで可能ですか？

CSS

ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul {
    border: 5px solid #999;
    font-size: 0;
}

li {
    padding: 25px;
    font-size: 1rem;
    border: 5px solid orange;
    display: inline-block;
}

HTML

<ul>
    <li>foo</li>
    <li>bar</li>
    <li>baz</li>
</ul>
4

3 に答える 3

2

あなたはこのように書くことができます：

li:first-child{
  margin-bottom:-5px;
  padding-bottom:30px;
  }

これをチェックしてくださいhttp://cssdesk.com/QWbvc

于 2012-10-23T12:26:27.090 に答える
0

sandeepの答えを参照することもできますが、これも試してください。親要素に固定の高さを割り当てるだけで、<li>高さが増加した後の動作を確認できます。

ul、li {マージン：0; パディング：0; リストスタイル：なし; }

ul {
    border: 5px solid #999;
    font-size: 0;
    height:79px;
}

li{
    padding: 25px;
    font-size: 1rem;
    border: 5px solid orange;
    display: inline-block;
}

li:first-child {
    height:25px;
}

また

li:first-child {
    padding-bottom:30px;
}
于 2012-10-23T12:22:25.047 に答える
0

選択した要素に「active」のようなクラスを追加してから、要素のルールをいくつか作成する必要があります。このjsfiddle.net/p85Ey/を確認してください

于 2012-10-23T12:29:56.697 に答える