Question

This是我迄今为止创造的。我想增加第一个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>

Answer 1

您可以这样写：

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

选中此http://cssdesk.com/QWbvc

Answer 2

你可以参考sandeep的答案，但也可以尝试这个 - 只需为父元素指定修复高度，并在<li>高度增加后查看它是如何工作的

ul，li { 保证金：0; 填充：0; list-style：none; }

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;
}

OR

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

Answer 3

您需要在所选元素中添加类似“active”的类，然后为元素编写一些规则。检查这个jsfiddle.net/p85Ey /

如何使用CSS为ul / list创建“选定效果”？

3 个答案: