html5 如何让一个li的宽度等于另外一个li且高度只有这个li一半
时间: 2024-02-22 16:57:19 浏览: 20
你可以使用CSS的伪元素`::before`或`::after`来实现这个效果。具体的步骤如下:
1. 给这两个li元素的父元素设置`position: relative`,使得子元素的定位相对于父元素。
2. 给其中一个li元素设置`position: absolute`,并且设置`top: 0`和`left: 0`,使其定位于父元素的左上角。
3. 给另外一个li元素设置`position: relative`,并且设置`left: 50%`,使其定位于父元素的水平中心点。
4. 给第一个li元素设置`width: 100%`和`height: 50%`,使其宽度与第二个li元素相等,高度为第二个li元素的一半。
5. 使用伪元素`::before`或`::after`来清除第一个li元素下面的空间,防止第二个li元素被遮挡。例如,可以给第一个li元素的`::after`设置`content: ""`、`display: block`、`height: 50%`和`margin-top: -1px`,使其高度为一半,并且向上移动1像素,覆盖住第一个li元素下面的空间。
示例代码如下:
```html
<ul class="parent">
<li class="li1"></li>
<li class="li2">Hello World!</li>
</ul>
```
```css
.parent {
position: relative;
list-style: none;
padding: 0;
margin: 0;
}
.li1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #ccc;
}
.li1::after {
content: "";
display: block;
height: 50%;
margin-top: -1px;
}
.li2 {
position: relative;
left: 50%;
transform: translateX(-50%);
background-color: #f00;
color: #fff;
padding: 20px;
text-align: center;
}
```