老师我不理解为什么设置input的高宽,有时需要block有时又不需要。

老师我不理解为什么设置input的高宽,有时需要block有时又不需要。

.top2 .top2-left .top2-left-div2 input{

display: block;

background-color:#000;

width: 80px;

height: 30px;

margin-bottom: 20px;

color: #ffffff;




.name,.phone,.email{

width: 498px;

height: 48px;

border: 2px solid rgba(255,255,255,0.4);

background-color: transparent;

margin-bottom: 15px;

}


正在回答

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

1回答

你好 ,.top2 .top2-left .top2-left-div2 input中设置display: block;与宽度和高度无关 , 因为input在浏览器有默认样式 ,input默认为  display: inline-block; ,也就是行内的块元素 ,这样input就会与其他元素在一行显示了 ,所以如下按钮默认是与文字在一行显示的 :

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

所以按钮要设置为display: block;使其自占一行 。希望解答了你的疑惑 , 祝学习愉快 ,望采纳


  • Tammyy 提问者 #1
    老师,谢谢你的解答,但是你还是没有说明为什么.name,.phone,.email为什么不设置display:block就能自动换行,既然默认样式是inline-block那三个按钮应该是排列成一行啊。
    2018-10-21 18:52:24
  • 好帮手慕夭夭 回复 提问者 Tammyy #2
    因为盛放.name,.phone,.email的父元素有宽度限制啊 ,同学在代码中也设置了 ,而且.name,.phone,.email本身宽度也挺大的 ,所以没办法在一行,被挤下来了哦
    2018-10-21 19:27:03
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

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

在线咨询

领取优惠

免费试听

领取大纲

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