简单的form表单

效果

image

html

<ul class="edit_list">
                                <li><em>*</em><span class="lab">公众号名称:</span><span class="value_box"><input type="text" /></span></li>
                                <li><em>*</em><span class="lab">公 众 号 ID:</span><span class="value_box"><input type="text" /></span></li>
                            </ul>

css

.edit_list li{ margin-bottom:15px;}
.edit_list li .value_box{ 310px; height:35px; line-height:35px; text-align:right; color:#1d6fb8; font-size:18px; display:inline-block;background:#FFF;border:1px solid #d7d7d7;  border-radius:5px; vertical-align:middle;}
.edit_list li .value_box input{ 310px; height:35px; line-height:35px;  font-size:16px; background:none; border:none; text-indent:8px;}
.edit_list li .lab{ 116px; height:35px; line-height:35px; text-align:center; margin-right:10px;color:#505050; font-size:18px; display:inline-block;vertical-align:middle;}
.edit_list li em{ 10px; height:35px; line-height:35px; text-align:center; color:#505050; font-size:18px; display:inline-block;vertical-align:middle;}
原文地址:https://www.cnblogs.com/ruoqiang/p/4090682.html