把input放在无序列表里，设置ul宽504，最后一个li（提交按钮）水平居中为什么用margin：0 auto无效，用textalign:center才有效

HTML部分：

<main>

        <!-- banner -->

        <section class="banner">

            <img src="images/banner3.jpg" alt="">

            <div class="mask">

                <ul>

                    <li><input type="text" placeholder="your Name"></li>

                    <li><input type="text" placeholder="your Phone"></li>

                    <li><input type="email" placeholder="your Email"></li>

                    <li><textarea placeholder="Write Your Commernt Here"></textarea></li>

                    <li><input type="submit" value="SEND MASSAGE" ></li>

                </ul>

            </div>

        </section>

    </main>

CSS部分：

/* 主体遮罩层样式 */

main .banner {

    width: 100%;

    height: 600px;

    position: relative;

}

/* 图片 */

main .banner img{

    width: 100%;

}

/* 遮罩层 */

main .banner .mask{

    width: 100%;

    height: 713px;

    background-color: rgba(0,0,0,.7);

    position: absolute;

    top: 0;

}

/* 遮罩层内的文本框 */

main .banner .mask ul{

    width: 504px;

    height: 360px;

    position: absolute;

    top:50%;

    left: 50%;

    margin-top: -180px;

    margin-left: -252px;

    color: #808080;;

}

/* 设置表单宽度和透明 */

main .banner .mask ul li textarea,main .banner .mask ul li input{

    background-color:transparent ;

    width: 502px;

}

/* 设置文本框的高度、间隙、边框 */

main .banner .mask ul li input{

    height: 40px;

    margin-bottom: 20px;

    border:1px solid #808080;

}

main .banner .mask ul li textarea{

    height: 110px;

    margin-bottom: 20px;

    border:1px solid #808080;

}

/* 提交按钮上的字的颜色、外边距、边框 */

main .banner .mask ul li input[type="submit"]{

    margin: 0;

    width: 200px;

    border:1px solid #808080;

    color: #808080;

}

/* 提交按钮所在的li相对于ul水平居中 */

main .banner .mask ul li:last-child{

    text-align: center;

}

同学你好，是给li标签设置的margin:0 auto;吗？如果是的话，这句代码是让li水平居中，按钮不会水平居中，button是内联块元素，给按钮设置margin:0 auto;不会居中，可以给父级li设置text-align: center;

如果想让按钮配合margin实现水平居中的效果，可以给按钮设置为块元素(display: block;)，再设置margin:0 auto;

如果上述方法不可以，建议：把代码粘贴上来，祝学习愉快~