极客观点
项目管理
HarmonyOS
不知道该如何让他们对齐，我曾想过根据计算，算出一个合适的margin-right的值，但是这样也太麻烦了，而且后期如果稍微一变更，又需要重新计算。请问各位大牛，有更简单的方法吗？调试了好久，请各位帮帮忙。
HTML：
<!DOCTYPE html>
<!--声明文档类型为Html网页文件-->
<html>
<head>
<!--负责对外通信，传递网页基本信息-->
<meta charset="utf-8" />
<!--设置编码格式，统一通信语言-->
<meta name="keywords" content="web组件,购物网站"/>
<!--设置搜索引擎可爬取的关键字，用逗号隔开，空格不行-->
<meta name="description" content="我真棒"/>
<!--设置网页描述，利于搜索及SEO优化-->
<title>商品选择页面</title>
<!--设置网页标题-->
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<!--存放css样式-->
</head>
<body>
<!--网页展示内容主体标签-->
<div id="wrap">
<div class="choose">
<div class="choose-left">
<p class="model">
<i>Model</i>
<span>4.7 inch</span>
<span>5.5 inch</span>
</p>
<p class="model">
<i>Color</i>
<span>White</span>
<span>Pink</span>
<span>Black</span>
</p>
<p class="model">
<i>RAM</i>
<span>16GB</span>
<span>64GB</span>
<span>256GB</span>
</p>
<p class="model">
<i>Version</i>
<span>ABC</span>
<span>DEF</span>
<span>GHI</span>
</p>
</div>
<div class="choose-right"></div>
</div>
</div>
</body>
</html>
CSS：
* {
/*选择所有元素用*这个符号*/
margin: 0;
/*消除默认外边距8px*/
}
body {
background: rgb(43,43,43);
/*背景颜色代码*/
}
#wrap {
width: 600px;
height: 360px;
background: #eee;
/*如果不设置背景色,元素为透明,因此就不可见*/
margin: 50px auto;
/*设置外边距,上下为50px,左右自动,左右即居中*/
padding: 10px;
/*内边距,上下左右10px*/
border-radius: 10px;
/*设置边框圆角属性*/
box-shadow: 0 0 8px #fff;
/*盒子阴影,倒数第二个为扩散程度,最后一个为颜色*/
}
#wrap .choose {
width: 100%;
/*占父容器宽度的100%,父容器如果是600px,那它就是600px*/
height: 220px;
}
#wrap .choose .choose-left {
width: 360px;
height: 100%;
padding: 20px;
}
#wrap .choose .choose-left p {
height: 50px;
}
#wrap .choose .choose-left p span {
padding: 8px;
border: 1px solid #222;
color: #666;
}
#wrap .choose .choose-left p i {
margin-right: 15px;
font-style: normal;
/*斜体字变正*/
font-size: 18px;
}
设置一个宽度。要是左侧的i宽度不固定，可以使用js拿到最长的那个元素的宽度，然后把所有的i都设置起来