請你幫我增加li<!DOCTYPE html> <html> <head> <title>左右布局</title> <meta charset="utf-8" /> <style> .left { float: left; width: 200px; height: 100vh; background-color: #28333E; } .right { float: left; width: calc(100% - 100px); height: 100vh; background-color: #fff; } </style> </head> <body> <div class="left"></div> <div class="right"></div> </body> </html>
时间: 2023-07-09 16:40:59 浏览: 233
好的,以下是修改后的代码,增加了一个带有三个列表项的无序列表:
```html
<!DOCTYPE html>
<html>
<head>
<title>左右布局</title>
<meta charset="utf-8" />
<style>
.left {
float: left;
width: 200px;
height: 100vh;
background-color: #28333E;
}
.right {
float: left;
width: calc(100% - 200px);
height: 100vh;
background-color: #fff;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding: 10px;
color: #fff;
}
</style>
</head>
<body>
<div class="left">
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</div>
<div class="right"></div>
</body>
</html>
```
在上述代码中,我们新增了一个包含三个列表项的无序列表,使用 CSS 的 `list-style` 属性去掉了默认的列表样式,并设置了内外边距和字体颜色。同时,我们也修改了右边的宽度,确保左右两边总宽度为 100%。
阅读全文