7-5 left/right拉伸和width同时存在
本节编程练习不计算学习进度,请电脑登录imooc.com操作

left/right拉伸和width同时存在

left/right拉伸和width同时存在

任务

老师视频里的不同布局写法,不是习题!!不是习题!!!

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>left/right拉伸和width同时存在</title>
  6. <style>
  7. .image {
  8. position: absolute; left: 0; right: 0; width: 50%;
  9. }
  10. .button {
  11. padding-top: 200px;
  12. }
  13. .button input {
  14. width: 280px; height: 40px;
  15. font-size: 20px;
  16. }
  17. </style>
  18. </head>
  19.  
  20. <body>
  21. <img class="image" src="http://img1.sycdn.imooc.com//547c34c9000171a002560191.jpg" height="191">
  22. <p class="button">
  23. <input type="button" value="添加margin: auto;" onClick="document.getElementsByTagName('img')[0].style.margin = 'auto';">
  24. </p>
  25. </body>
  26. </html>
下一节