flex布局问题

Question

<div class="applyForm" style="display:none;">
    <h3>填写报名信息</h3>
    <form>

        <div class="top">
            <p>
                <label class="lusername">姓名</label>
                <input type="text" class="username text1">
            </p>
            <p>
                <label>民族</label>
                <input type="text" class="nation text1">
            </p>
            <p>
                <label class="lphone">联系电话</label>
                <input type="text" class="phone text1">
            </p>
            <p>
                <label>年龄</label>
                <input type="text" class="age text1">
            </p>
            <p>
                <label>血型</label>
                <input type="text" class="bloodtype text1">
            </p>
        </div>

        <div class="bottom">
            <p>
                <label>病史</label>
                <input type="text" class="medicalhistory text2">
            </p>
            <p>
                <label>病史</label>
                <input type="text" class="familymedicalhistory text2">
            </p>
            <p>
                <label class="lconsultdirection">咨询方向</label>
                <input type="text" class="consultdirection text2">
            </p>
        </div>
        <img src="img/btn_submit.png" class="submit">
    </form>
</div>

css

.applyForm{
    width: 100%;
    height: 100%;
    background: url("../img/p_bg.jpg");
    background-size: 100% 100%;
    display: flex;
    flex-direction:column ;

}
.applyForm h3{
    width: 100%;
    margin-top:14%;
    text-align: center;
    letter-spacing: 3px;
}
.applyForm form{
    width: 84%;
    height: 78%;
    margin-left: 8%;
    top:17%;
    flex:1;


}
.applyForm form .top p{
    width: 50%;
    margin-bottom: 10px;
}
.applyForm form .bottom p{
    width: 100%;
}
.applyForm form p label{
    margin-bottom: 4px;
    display: inline-block;
}
.applyForm form .bottom{
    width: 100%;
    height: 40%;
    top:42%;
}
.applyForm form .top{
    width: 100%;
    height: auto;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.applyForm form  .text1{
    border: 1px solid #CAC8C8;
    border-radius: 5px;
    width: 85%;
    height: 30px;
}
.applyForm form  .text2{
    width: 100%;
    border: 1px solid #CAC8C8;
    border-radius: 5px;
    height: 30px;
}
.applyForm form .submit{
    width: 36%;
    bottom: 2%;
    left: 32%;
}

.applyForm form label.lusername:before, .applyForm form label.lphone:before, .applyForm form label.lconsultdirection:before {
    content: ' *';
    color: red;
    font-size: 18px;
    margin-left: -10px;
}

请问上面为什么会一竖排并没有margin-right 但是查看元素的时候有 但是元素计算是没有的

请问为什么

Answer 1

最后的图示的是 Computed value，是排版前计算出来的值

倒数第二张图的是 Actual value，是实际应用的值

你的 p 设置了 50% 宽度，margin-left 与 margin-right 的默认值都是 0，所以形成了“over-constrained”，在 ltr 方向下 margin-right 会被忽略，当做 auto 计算，即获得剩余的空间。

Answer 2

一排竖是因为你加了flex-direction:column;。
有margin-right则是因为你的.top:width:100%;，但是子级.top p:width:50%;，这跟flex没关吧

Answer 3

直接CSS开头写上*{margin:0;padding:0;}

Answer 4

需要写上*{margin:0;padding:0;}去掉浏览器默认样式;把flex-direction:column;改成flex-direction:row;应该就可以了。