<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
background: antiquewhite;
}
div{
width: 300px;
background-color: white;
}
h2{
background-color: rgb(233,24,90);
color: white;
font-size: 14px;
font-weight: 500;
line-height: 42px;
padding-left: 5px;
}
span{
font-size: 12px;
color: white;
text-align: center;
font-size: 12px;
line-height: 6px;
width: 15px;
height: 15px;
box-sizing: border-box;
display:inline-block;
color: white;
border-style: solid;
border-width:10px;
border-color: black;
border-radius: 50%;
text-align: center;
}
p{
vertical-align:auto;
font-size: 12px;
border-bottom-style: dotted;
border-bottom-width: 1px;
border-bottom-color: gray;
}
</style>
</head>
<body>
<div>
<h2>大家都喜欢买的美容品</h2>
<p><span>1</span> 雅诗兰黛即时修护眼部精华霜 15ml
</p>
<p><span>2</span>
伊丽莎白雅顿显效复合活肤霜 75ml
</p>
<p><span>3</span>
OLAY玉兰油多效修护霜 50g
</p>
<p><span>4</span>
巨型一号丝瓜水320ML
</p>
<p><span>5</span>
倩碧保湿洁肤水2号 200ml
</p>
<p><span>6</span>
比度克细肤淡印霜 30g
</p>
<p><span>7</span>
兰芝(LANEIGE)夜间修护锁水面膜80ml
</p>
<p><span>8</span>
SK-II护肤精华露215ml
</p>
<p><span>9</span>
欧莱雅青春密码活颜精华肌底液
</p>
</div>
</body>
</html>

<span><p>圆角对不齐及圆内数字不居中
- 写回答
- 好问题 0 提建议
- 关注问题
- 邀请回答
-
2条回答 默认 最新
- 你好!机器人 2021-11-27 15:36关注
html发一下
你可以试下用flex布局
display:flex;
align-items: center;//垂直居中
justify-content: center;//左右居中本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报 编辑记录