html – Textarea max-width

前端之家收集整理的这篇文章主要介绍了html – Textarea max-width前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有textarea max-width的问题,我需要它不超过.table-cell.two宽度调整大小,在这个例子:

JSfiddle example

HTML:

  1. <div class="wrapper">
  2. <div class="table">
  3. <div class="table-cell one">
  4. <p>small cell</p>
  5. </div>
  6. <div class="table-cell two">
  7. <p>textarea cell</p>
  8. <textarea></textarea>
  9. </div>
  10. </div>

CSS:

  1. textarea {
  2. max-width: 100%;
  3. }
  4.  
  5. .wrapper {
  6. width: 500px;
  7. }
  8.  
  9. .table {
  10. display: block;
  11. width: 100%;
  12. }
  13.  
  14. .table-cell {
  15. display: table-cell;
  16. background: #E2D8C1;
  17. vertical-align: top;
  18. padding: 10px;
  19. }
  20.  
  21. .table-cell.two {
  22. width: 100%;
  23. background: #DAC082;
  24. }
  25.  
  26. .table textarea {
  27. max-width: 100%;
  28. width: 100%;
  29. height: 100px
  30. }

请不要建议使用javascript,需要一个纯粹的CSS解决方案.

解决方法

使用:
  1. textarea {
  2. /* will prevent resizing horizontally */
  3. resize:vertical;
  4. }

猜你在找的HTML相关文章