html - 当宽度单位为 % 时 textarea 大小变小，使用像素时工作正常-6ren

html - 当宽度单位为 % 时 textarea 大小变小，使用像素时工作正常

转载作者：行者123 更新时间：2023-11-28 14:33:36

24

4

Jsfiddle 链接:https://jsfiddle.net/dhanu10896/ohb3xayn/11/
我有 textarea 和它下面的一条指令，我必须在 textarea 的右下端下方显示该指令，而且文本区域可以调整大小，因此当文本区域的大小增加时指令应该随之调整。

为此，我将文本区域和指令包含在一个 div 中，并使其成为内联 block ，这将占用文本区域的宽度并将指令对齐到右侧。

这在宽度以像素为单位时有效，但当宽度以 %(百分比)为单位时则无效。

代码:

displayCell {
  padding: 2px 0 3px 0;
  border: 1px solid transparent;
}

.clearfix {
  display: block;
}

html form, body form {
    font-size: 14px;
    line-height: 1.42857;
    color: #32363a;
    font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.displayInlineBlock, .inlineBlock {
    display: inline-block;
}

html textarea, body textarea {
    font-size: 14px;
    font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    font-size: 1rem;
    line-height: 1.42857;
    font-weight: 400;
    appearance: none;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    font-size: inherit;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    border-style: solid;
    border-width: 1px;
    border-color: #89919a;
    border-radius: 4px;
    color: #32363a;
    background-color: #fff;
    -webkit-transition: border-color 125ms;
    transition: border-color 125ms;
    height: 36px;
    height: var(--fd-forms-height);
    padding-left: 12px;
    padding-right: 12px;
    width: 100%;
    height: 72px;
    padding-top: 12px;
}

.displayFlex {
    display: flex;
}
html .textareaInstruction, body .textareaInstruction {
    flex-grow: 1;
    width: 0px;
    text-align: right !important;
    clear: both;
    display: block;
    font-size: .85714rem;
    line-height: 1.33333;
    font-weight: 400;
    color: #51555a;
    padding: 8px 0;
    position: relative;
    padding: 0;
}

.formElementInstruction {
    color: #666666;
    white-space: nowrap;
    font-weight: normal;
}
.mr2px {
    margin-right: 2px;
}

<html>
<body>

<form>

<h2>
to fix
</h2>
  <div class="displayCell clearfix">
    <div class="inlineBlock">
      <textarea name="description" id="description" style="width:100%;height:100px;width:75%;"></textarea>
      <div class="displayFlex">
        <div class="formElementInstruction  textareaInstruction">
          <span class="mr2px" id="text_counter_description">1000</span>left</div>
      </div>
    </div>
  </div>
  
  <h2>
  should look like (also try resizing texarea)
  </h2>
   <div class="displayCell clearfix">
    <div class="inlineBlock">
      <textarea name="description" id="description" 
      style="height:100px;width:500px;"></textarea>
      <div class="displayFlex">
        <div class="formElementInstruction  textareaInstruction">
          <span class="mr2px" id="text_counter_description">1000</span>left</div>
      </div>
    </div>
  </div>
</form>
</body>
</html>

最佳答案

在包含 block 的文本区域上，您应用了具有设置属性 display: inline-block 的类 inlineBlock div 不会延伸到整个宽度，它会占用空间只有文本区域需要。

此外，当您在 textarea 上设置 style="width:100%;height:100px;width:75%;" 时，它将占其父级的 75%，这里的父级是带有类的 div inlineBlock 所以它将是这个 div 的 75% 而不是设备宽度的 75%。

只设置一次 width 属性，因为最后一次会覆盖第一次。

如果您不想在这些文本区域上设置像素，您可以通过以下方法解决此问题:

.displayInlineBlock, .inlineBlock {
    display: inline-block;
    min-width: 500px;
}

<textarea name="description" id="description" style="width:100%;height:100px"></textarea>

这是查看工作解决方案的 fiddle 链接 http://jsfiddle.net/aditi17/t2sybfr7/257/

关于html - 当宽度单位为 % 时 textarea 大小变小，使用像素时工作正常，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53862758/

24

4

0

文章推荐： css - 标题悬停后如何制作无序列表 "stay"？

文章推荐： reactjs - CSS :empty pseudo-selector combined with :after pseudo-element

文章推荐： Javascript:使用 document.write() 添加样式内容

SQL:总和(单位)表a减去总和(单位)表b
我有 2 张 table ； item_in(item_id,unit) item_out(item_id,unit) 现在假设我想知道为每个项目插入了多少个单元，我只是查询 select sum(u
youtube - Youtube 数据配额限制为 10k 单位/天/应用程序，还是 10k 单位/天/用户？
API 浏览器中有 3 个速率限制类别: 如果我使用 Youtube 数据 API(其中跟随 implicit OAuth grant flow)创建客户端 Web 应用程序，我是否仍被限制为总共 1
sql - ST_SnapToGrid 单位
我正在使用一个 postgresql 表，该表包含许多带有 GEOMETRY(Point, 4326) 的行。使用 ST_SnapToGrid 函数和 DISTINCT 选择，我只根据显示的 map
c++ - 单位;试图编译类来测试
我对 C++ 和 Cppunit 都很陌生。我正在尝试编译一个小的 cppunit 测试。但是，我没有成功。 qwerty@qwerty:~/chessgame/src$ g++ -Wall Coor
元素大小的 CSS Rem 单位
我注意到 REM 单位可用于元素的大小，而不仅仅是字体大小。并且对 HTML 字体大小属性非常有用。 html { font-size:1vw } @media all and (max-width:
python - 匀称的线串 .length 单位
我试图在 Shapely 中找到线串的长度(以米为单位)，但似乎无法达到预期的结果。几乎可以肯定我在坐标系方面犯了一些错误，但我无法弄清楚。这是单行的一些简化代码: from shapely.geo
R 圆形包计算线性平均值而不是圆形平均值，单位 = "hours"
对于大量的物种数据集，我试图计算给定月份集的圆形平均值，例如对于从 3 月到 7 月开花的物种，我想知道开花的平均月份(即 5 月)，以及围绕平均值的方差。给定月份是循环的，因此 12 月到 2 月
iphone - 您还应该在单元测试中进行内存管理吗？ (OC 单位)
我还应该在单元测试中释放对象吗？我注意到在Apple的“iPhoneUnitTests”示例项目中，设置方法中的对象是[[object alloc] init]，但从未在单元测试中的任何地方发布？
xcode - OpenGL 中的精度/单位
我目前正在使用 OpenGL 进行开发，并使用米作为我自己的单位，即 20 厘米宽的三角形为 0.2。然而 OpenGL 似乎对这些数字进行了舍入，最终的形状并不完全符合我的意愿。这在 OpenGL
math - 进行信号频谱分析时的傅立叶变换 (FFT) 单位
我的问题与对信号进行频谱分析或将信号放入 FFT 并使用合适的数值包解释结果的物理意义有关，具体: 获取一个信号，例如时变电压 v(t) 将其放入 FFT 中(您将得到复数序列) 现在取模 (abs
Fabricjs 文本对象 fontSize 单位
在深入研究代码后，我意识到 Fabricjs Text 对象的 fontSize 是在 PIXELS 中测量的。在我的项目中，有时我需要使用点而不是像素。当指定单位时，我只在代码中找到一个位置，此片
mongodb mongoose maxDistance 单位
在我的应用程序中，我尝试使用，RentModel.find({prop_location : { $near : [msg.lat, msg.lng],$maxDistance : 500}}，函数(
libgdx: scene2d + box2d - 单位
我正在开发我的第一个 LibGdx (Scene2d + Box2d) 游戏，这对我来说是一个全新的领域，但仍然对一些事情感到有点困惑，尤其是关于单位。已经看到了几种不同的处理方法，但仍然不确定哪种方
给定年份的 MySQL 单位/订单分布
我正在寻找一个 MySQL 查询(子查询很好)，它将以下列格式获取过去一年中每个订单的单位分布: units_per_order | number_of_orders |
javascript - 带有数字格式(单位)的图表
我正在使用 Highcharts生成折线图。我遇到了 numberFormat 的问题: var test = 15975000; numberFormat(test, 0,',','.'); 结果
c++ - 用户定义的类型 - 单位、转换
我正在尝试创建一些用户定义的类型来表示单位，以便我可以强类型化函数参数。例如，长度为毫米，速度为毫米每秒，加速度为毫米每秒等。到目前为止我已经这样做了: template struct Value
testing - 最低精度的 ULP 单位
谁能解释一下最低精度的 ULP 单位？我有如下定义，但还是不清楚 “表示分数时的误差大小与存储的数字大小成正比。ULP 或最小精度单位定义了存储数字时可以获得的最大误差。存储的数字越大，ULP 越大”
html - 为每个图像应用固定的 px 单位
我有一张卡片图像，我需要重复它 30 次，每次我想申请一张特定卡片的左侧位置时，它会与卡片重叠，然后再停留在一副牌的位置上。问题是，当我将左侧位置应用于图像卡片时，它会将相同的左侧位置应用于所有卡片
javascript - 更改滚动间隔/单位/像素
有没有办法用php代码更改每个滚动条的大小。说明：当我向下滚动时，它会下降x（50~）像素，我想将x改为20。编辑：这是我的代码。。。 Excel "; $i=1; wh
c++ - 四舍五入到 100 单位
我不知道下面的想法是否可行或不能概括它，但我想将每个计算值四舍五入到 100 单位四舍五入。例子: double x; int x_final; ... if (x<400) x_final=400

首页

博学

6Ren·AI

商城

html - 当宽度单位为 % 时 textarea 大小变小，使用像素时工作正常