2020届毕业生，疫情期间是如何开始毕业设计的撰写？——踩坑记录

1.简单介绍

《基于Web的网上校园二手交易系统的设计与实现》——毕设题目

目前在写前端页面，

2.困难点
在设计发布二手商品页面时，由于没有***考虑表单用合适的标签***，导致浪费大量精力，时间。

3.直接奔主题
label标签 我用的padding值自己 撑的， 未设置在固定宽， 出现图中这种情况，并且我单独给此标签设置宽、高都无效。
整个页面的样式代码如下：

* {
    border-radius: 1px;
}

.publish-content {
    padding-top: 30px;
    background: #eee;
}

.publish-content .container>div {
    background: #fff;

}
.publish-title {
    margin: 0 0 20px 0;
    padding: 10px 0;
    border-radius: 5px;
    border: solid 1px #e6e6e6;
    text-align: center;
}

.publish-main .upload-img {
    position: relative;
    left: 40%;
    margin: 30px 0;
    width: 132px;
}


.publish-main .publish-input {
    height: 40px;
    margin: 30px 40px 0 40px;
}

.publish-input label,
.publish-input .select-input label,
.publish-input .good-name-input label,
.publish-input .price-input label,
.publish-input .class-select label,
.publish-input .change-way label {
    padding: 5px 30px;
    font-size: 15px;
    background: #fbfbfb;
}

.publish-input>div {
    display: inline-block;
    /* height: 40px; */
    /* border: solid 1px #ccc;
    box-shadow: 0 0 1px #ccc; */

}

.publish-input .select-input,
.publish-input .good-name-input,
.publish-input .price-input,
.publish-input .class-select,
.publish-input .change-address,
.publish-input .contact-way {
    border: solid 1px #ccc;
    box-shadow: 0 0 1px #ccc;
}

.publish-input .select-input select,
.publish-input .good-name-input input,
.publish-input .price-input input,
.publish-input .class-select select,
.publish-input .change-address input,
.publish-input .contact-way input {
    /* margin-left: 20px;  */
    width: 200px;
    height: 33px;
    border-left: solid 1px #e9e9e9;
    font-size: 15px;
    color: #aaa

}

.publish-input .change-way label {
    border: solid 1px #e6e6e6;
    box-shadow: 0 0 1px #ccc;
}

.publish-input .change-way input {
    width: 40px;
    height: 33px;
}

.publish-input .label {
    display: block;
    padding: 10px 0;
    border: solid 1px #e6e6e6;
    background: #fbfbfb;
}

后来修改标签为滥用的div，设置宽，高，并i企鹅并且对后面的输入框进行同样的宽高设置，这样，问题就解决了。

.publish-input div:first-child,
.publish-input .same-style {
    display: inline-block;
    width: 80px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    border: solid 1px #ccc;
    font-size: 14px; 
    background: #fbfbfb;
}


.publish-input:nth-of-type(3)>div {
    display: inline-block;
}

.publish-input .small-text {
    margin-right: 40px;
}
.publish-input .tips {
    display: inline-block;
    line-height: 20px;
    font-size: 12px;
    color: #999;
}

.publish-input a {
    margin-left: 30px;
    padding: 7px 30px;
    font-size: 13px;
    color: #fff;
    background: #ee4e4f;
}

.publish-input .select-input,
.publish-input .good-name-input,
.publish-input .price-input,
.publish-input .class-select,
.publish-input .contact-way {
    display: inline-block;
    width: 200px;
    height: 32px;
    margin-left: -5px;
    padding-left: 5px; 
    line-height: 32px;
    border: solid 1px #ccc;
    box-shadow: 0 0 1px #ccc;
    border-left: none;
    font-size: 14px;
}

另外付本站别人解答：

label和span标签设置宽度width无效的解决办法
连接：
https://blog.csdn.net/dyr_1203/article/details/74942828