请问如何设置密码框才能使框里的提示文字显示完整呢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding:0;
margin:0;
}
body{background:#48d1cc;}
.header{background:#333;
height:50px;
width:100%;
position:fixed;}
.logo img{height:50px;
width:150px;
float:left;}
.nav{text-align:right;}
.nav-li{width:50px;
height:50px;
margin:0 25px;
display:inline-block;
vertical-align:middle;
text-align: center;
color:#fff;
font:24px bold;
line-height:50px;
}
.content{padding-top: 50px;
padding-bottom:50px;
width:80%;
height:400px;
overflow:;
margin:0 auto;
}
.title{font-size: 24px;
font-weight: bold;
margin:50px auto 20px;}
.left{float:left;
width:40%;}
.list1{float:left;
margin-right:50px;}
.list1-li{background:#f08080;
width:4em;
margin:20px 0;}
.list2{float:left;}
.list2-li{margin:20px 0;}
.middle{float:left;
width:30%;}
.list3{width:80%;}
.list3-li{float:left;
margin:20px 20px 20px 0;}
.verl{width:1%;
height:600px;
float:left;
background:orange;}
.login{width:19%;
float:right;}
form input{width:90%;
height:3em;
margin:10px 0;
font-size: 12px;
font-family: 微软雅黑;
}
.handout{width:92%;
color:#fff;
font-size:16px;
font-weight:bold;
background:red;}
.footer{position:fixed;
bottom:0;
width:100%;}
.link{height:50px;
background:#333;
text-align:center;}
.link-li{display:inline-block;
height:50px;
margin:0 25px;
font:24px bold;
line-height:50px;
text-align:center;
color:#fff;}
.logo,.nav-li,.link-li,.confirm{cursor:pointer;}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">
</div>
<div class="nav">
<div class="nav-li">课程</div>
<div class="nav-li">路径</div>
<div class="nav-li">猿问</div>
<div class="nav-li">实战</div>
<div class="nav-li">手记</div>
</div>
</div>
<div class="content">
<div class="left">
<div class="title">课程推荐</div>
<div class="list1">
<div class="list1-li">职业路径</div>
<div class="list1-li">职业路径</div>
<div class="list1-li">职业路径</div>
<div class="list1-li">职业路径</div>
<div class="list1-li">职业路径</div>
</div>
<div class="list2">
<div class="list2-li">html5与css3实现动态网页</div>
<div class="list2-li">零基础入门Android语法与界面</div>
<div class="list2-li">ios基础语法与常用控件</div>
<div class="list2-li">php入门开发</div>
<div class="list2-li">java入门开发</div>
</div>
</div>
<div class="middle">
<div class="title">相关课程</div>
<div class="list3">
<div class="list3-li">html</div>
<div class="list3-li">css</div>
<div class="list3-li">javascript</div>
<div class="list3-li">html5</div>
<div class="list3-li">css3</div>
<div class="list3-li">jquery</div>
<div class="list3-li">移动基础</div>
<div class="list3-li">移动端app开发</div>
</div>
</div>
<div class="verl"></div>
<div class="login">
<div class="title">登录</div>
<div class="form">
<form>
<input type="text" class="name" placeholder=请输入登录邮箱/手机号>
<input type="password" class="pasw" placeholder=请输入6到16位密码，区分大小写，不可使用空格 maxlength="16" minlength="6"><br>
<input type="submit" class="handout" value=登录>
</form>
</div>
</div>
</div>
<div class="footer">
<div class="link">
<div class="link-li">网站首页</div>
<div class="link-li">企业合作</div>
<div class="link-li">人才招聘</div>
<div class="link-li">联系我们</div>
<div class="link-li">常见问题</div>
<div class="link-li">友情链接</div>
</div>
</div>
</body>
</html>14
收起
正在回答 回答被采纳积分+1
2回答
weibo_飞来云去_0
2017-07-26 21:37:22
卡布琦诺
2017-07-26 17:57:08
测试了你的代码，这个是显示完全的呀，placeholder里面文字的长度以及input的宽度会影响提示文字是否显示完全。另外发现你的代码有基础写的不是很严谨
<form> <input type="text" class="name" placeholder=请输入登录邮箱/手机号> <input type="password" class="pasw" placeholder=请输入6到16位密码，区分大小写，不可使用空格 maxlength="16" minlength="6"><br> <input type="submit" class="handout" value=登录> </form>
placeholder后面的提示文字需要放在引号内，value后面的文字也需要放在引号内，这样比较规范
<form> <input type="text" class="name" placeholder="请输入登录邮箱/手机号"> <input type="password" class="pasw" placeholder="请输入6到16位密码，区分大小写，不可使用空格" maxlength="16" minlength="6"><br> <input type="submit" class="handout" value="登录"> </form>
希望可以帮到你！
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星