老师,输入框文字左右对齐都可以,但是两边对齐实现不了,是为什么呢

老师,输入框文字左右对齐都可以,但是两边对齐实现不了,是为什么呢

<!DOCTYPE html>

<html>

<meta charset="UTF-8">

<title></title>

<head>

<style>

*{

padding:0px;

margin:0px; 

}

/*nav样式*/

nav{

background-color:#efefef;

height:80px;

width:100%;

overflow: hidden;

position: relative;

z-index: 10;

}

  li:nth-child(5){

     position:relative;

    }

.nul>li{

float:left;

list-style: none;

line-height: 80px;

font-size:14px;

}

.nimg1{

height:70px;

padding-top: 5px;

margin-left: 200px;

}

.nimg2{

height:22px;

padding-top:28px; 

}

.nspan1{

font-size: 18px;

font-weight: bold;

}

.nspan2{

font-size: 12px;

color: grey;

}

.nspan3,.nspan4{

color:rgb(251,116,3);

}

    .nul>li:nth-child(3){

     margin-left: 40px;

    }

    .nul>li:nth-child(4),li:nth-child(5){

     margin-left: 10px;

    }

    .nul>li:nth-child(6){

     margin-left: 30px;

    }

  

    .nul2{

     display: none;

     list-style: none;

     line-height: 20px;

     margin-top:-20px;

     border: 1px rgb(251,116,3) solid;

     background-color: white;

     position: absolute;


    }

    .nul2>li:nth-child(2){

     border-bottom: 1px black dotted;

    }

    .nul>li:nth-child(5):hover{

     cursor:pointer;

    }

    .nul>li:nth-child(5):hover .nul2{

     display:block; 

    }

    .line-top{

     height:2px;

     width: 100%;

     background-color:rgb(36,135,201);

    }

    /*main部分*/

    .mfont{

     font-size:16px;

     margin-left: 240px;

     font-weight: bold;

    }

    .mfont span{

     font-size: 14px;

     color:grey;

     font-weight: normal;


    }

    .mform{

     height:400px;

     width:800px;

     margin:0px auto; 

     border:1px rgb(251,116,3) solid;

     border-radius: 5px;

     overflow: hidden;

    }

    .mformtop{

     height: 25px;

     width: 100%;

     background-color: rgb(251,116,3);

        color:white;

        line-height: 25px;

        padding-left: 5px;

    }     

    .mformcontent{

     width:300px;

     margin:0px auto; 

        margin-top:20px;

    }

    .mformcontent p{

     line-height: 25px;

    }

    .mformcontent span{

     display: inline-block;

     width:75px;

     text-align: justify;

    }


</style>

</head>

<body>

<nav>

    <ul class="nul">

     <li><img class="nimg1" src="素材/logo.png"></li>

     <li><span class="nspan1">慕课高铁客户服务中心&nbsp;|&nbsp;</span><span class="nspan2">客户服务</span></li>

     <li>意见反馈<span class="nspan3">imooc@.com</span></li>

     <li>您好,请<span class="nspan4">登录</span>|注册</li>

     <li>

     <span>我的IMOOC&#9660;</span>

     <ul class="nul2">

             <li>未完成的订单</li>

             <li>已完成的订单</li>

             <li>我的保险</li>

             </ul>

     </li>

     <li><img class="nimg2" src="素材/手机.png"></li>

     <li>手机版</li>

    </ul>


</nav>

<main>

        <div class="line-top"></div>

        <div class="mfont">您现在的位置:<span class="mspan1">客运首页>注册</span></div>

        <div class="mform">

         <div class="mformtop">账户信息</div>

         <div class="mformcontent">

         <p><span class="mformspan1">用户名:</span><input type="text"></p>

         <p><span class="mformspan2">登录密码:</span><input type="password"></p>

         <p><span class="mformspan3">确认密码:</span><input type="password"></p>

         <p><span class="mformspan4">姓名:</span><input type="text"></p>

         <p><span class="mformspan5">证件类型:</span><input type="text"></p>

                <p><span class="mformspan6">证件号码:</span><input type="text"></p>

         <p><span class="mformspan7">邮箱:</span><input type="text"></p>

                <p><span class="mformspan8">手机号码:</span><input type="text"></p>

                <p><span class="mformspan9">旅客类型:</span><input type="text"></p>

         </div>

        </div>

</main>

<footer></footer>

</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕慕子 2020-01-08 15:52:04

同学你好,因为text-align:justify 不处理强制打断的行,也不处理块内的最后一行。通俗一点讲,就是只有一行显示的时候这个属性是不起作用的,或者使用了word-break: break-all;这种强制换行的属性,也是不起作用的。

建议:可以使用after在span下一行内容,让text-justufy属性起效。

http://img1.sycdn.imooc.com//climg/5e1589a409d3c71104420180.jpg

调整冒号的位置:

http://img1.sycdn.imooc.com//climg/5e1589c20982668910960374.jpg

调整span和input标签的样式

http://img1.sycdn.imooc.com//climg/5e1589ed0938af6605140437.jpg

最终实现效果:

http://img1.sycdn.imooc.com//climg/5e1589ff095cdd4b02450314.jpg

其他的细节样式,同学可以自己调整一下。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

  • 提问者 慕粉8021849 #1
    老师,那有什么其他属性可以就这样直接居中对齐吗
    2020-01-08 17:41:32
  • 好帮手慕慕子 回复 提问者 慕粉8021849 #2
    同学你好,没有其它属性了,祝学习愉快~
    2020-01-08 18:31:24
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师