完善样式:
.a{
margin-left: 100px;
margin-top: 30px;
}
.a div{
margin-top:15px;
}
.a div span{
width: 100px;
text-align: right;
font-size: 14px;
display: inline-block;
float: left;
height: 32px;
line-height: 32px;
margin-right: 10px;
}
.a div input{
height: 20px;
width: 300px;
border-radius: 5px;
padding-left: 10px;
}
.a div select{
height: 28px;
width: 312px;
}
.a div textarea{
height: 60px;
width: 312px;
border-radius: 5px;
}
.b{
/*background: #2b9fd2;
color: #FFFFFF;*/
padding: 0 15px;
height: 30px;
border: none;
outline: none;
margin-left: 90px;
margin-top: 20px;
}
#c{
width: 120px;
border-radius: 5px;
}
.h{
width: 500px;
margin-left: 20px;
}
最终html文件;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>查看商品详情</title>
<link rel="stylesheet" href="css/lookgoods2.css" />
</head>
<body>
<h3>查看商品详情</h3>
<div class="a">
<div>
<span>商品名称</span>
<input type="text" value="冰箱001" />
</div>
<div >
<span>生产商</span>
<select>
<option value="海尔集团">海尔集团</option>
<option value="格力集团">格力集团</option>
</select>
</div>
<div>
<span>生产商ID</span>
<select>
<option value="HE001">HE001</option>
<option value="GELI001">GELI001</option>
</select>
</div>
<div>
<span>重量</span>
<input type="text" value="20公斤" />
</div>
<div>
<span>材质</span>
<input type="text" value="铝制品" />
</div>
<div>
<span>单价</span>
<input type="text" value="1600" />
</div>
<div>
<span>产地</span>
<input type="text" value="青岛" />
</div>
<div>
<span>生产日期</span>
<input type="text" value="2019/6/13" />
</div>
<div>
<span>质量保证期</span>
<input type="text" value="2个月" />
</div>
<div>
<span>生产标准号</span>
<input type="text" value="sch001" />
</div>
<div>
<span>相关许可证</span>
<input type="text" value="xg001" />
</div>
<div>
<span>使用方法</span>
<textarea maxlength="1000" placeholder="请输入内容(最大1000字)">通电24小时后使用</textarea>
</div>
<div>
<hr class="h">
</div>
<div class="b">
<input id="c" type="button" value="返回" />
</div>
</div>
</body>
</html>
最终效果;