时间戳

首页 > 解决方案 > 如何扩大输入书写区域？

css - 如何扩大输入书写区域？

问题描述

输入文本区域在移动时会变小，看起来不太好。我怎样才能扩展这个领域？

在此处输入图像描述


  .arama input{
    border: 1px solid #4d9df2!important;
    padding: 18px 227px 19px 21px;
    height: 41px;
    border-radius: 60px!important;
    /* font-size: 18px!important; */
    color: #000;
  }

标签： css

解决方案

减少正确的填充。

理想情况下，左右内边距应该相同，但您的输入元素中有一个按钮，所以右内边距应该是按钮的宽度加上左内边距。

以下是您拥有的和应该拥有的之间的区别：

.i1 {
    border: 1px solid #4d9df2!important;
    padding: 18px 227px 19px 21px;
    height: 41px;
    border-radius: 60px!important;
    color: #000;
  }
  
.i2 {
    border: 1px solid #4d9df2!important;
    padding: 18px 21px 19px 21px;
    width: 356px;
    height: 41px;
    border-radius: 60px!important;
    color: #000;
  }
<input class="i1" value="ORIGINAL Text here, Text here, Text here, Text here, Text here, Text here" />
<input class="i2" value="FIXED Text here, Text here, Text here, Text here, Text here, Text here" />

推荐阅读