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() 添加样式内容

swift - UITableView 变小
我将尝试借助图片来解释我的问题: 首先，我刚刚向我的 UIViewController 添加了一个 UITableView。我选择它来显示它的框架，没有问题。接下来，当我将按钮连接到 UIViewC
android - 我想打开侧边栏时让 Activity 变小？
当我打开侧边栏时，我的背部 Activity 应该变小，我该如何实现？最佳答案嘿，你也可以为较小的 Activity 提供最佳效果。检查ResideMenu 库演示。非常适合您的回答关于andr
ios - 自动调整 UITableViewCell 变小
我正在尝试以编程方式创建一个 TableView 单元格原型(prototype)(类似于下面的原型(prototype))。设计了具有两个堆栈 View 的单元格， a) 包含文本标签的垂直堆栈
css - 如何让变小？
如何让td(highlighted)变小？我尝试将 witdh 设置为等于 50px 但不能显示更小的宽度最佳答案由于您使用的是表格，因此如果您希望整列为 50px，则需要将每一行中的每个 td
ios - UIWebView sizeToFit() 变小
似乎在 UIWebView 上使用 sizeToFit() 不会将大小更改为更小，只会更大。这是一些设置代码: var scrollView: UIScrollView! var webView: U
ios - iPhone 使斜体标签 () 变小
我们发现了 iPhone 渲染斜体标签的问题。当为它定义的 font-family 不同于其父级的 font-family 时，斜体文本呈现的比它应该的小得多。该问题似乎并未出现在所有 iOS 设备上
Android，如何使 AVD 变小？
我创建了一个具有以下特征的 AVD:目标:Android Honeycomb(API 级 Honeycomb)SD卡大小:64M皮肤:内置 WXVGA 但问题是，当我运行这个 ADV 时，它的尺寸比我
android - 如何让 TimePicker 变小
是否可以在 Activity xml 中使默认的 TimePicker 更小？我已经搜索过这个但到目前为止只发现了如何创建一个我不想做的自定义时间选择器，或者创建一个我也不想做的弹出窗口。有没有人
ios - 如何使 UIRefreshControl 变小？
UIRefreshControl 使用非常大的微调器: 我想调整它的大小(微调器的框架，而不是下拉长度!)看起来更像这样: 我在 the reference docs 中看不到任何内容关于如何做到这一
java - 打开抽屉导航时如何使背景 Activity 变小？
我想在打开Navigation Drawer时让我的后台Activity变小一点，模拟Airbnb应用中存在的效果.我想最好的解释是截图: 但重点不是让View只是变小，而是让它成为一个与Drawer
html - 页面加载后移动 View 变小
我开发的其中一个网站有点问题。这个问题很简单，但是解决方案似乎有点难。问题问题是页面最初在移动设备上呈现时应该呈现的样子，但在页面加载完成后，页面会立即调整大小以适合视口(viewport)。没什
android - 包含两行文本时 TextView 变小
我有一个简单的水平 LinearLayout，里面有四个相同样式的 TextView。当 TextView 中的文本需要两行时，TextView 变小: 我不明白为什么。有人可以帮忙吗？谢谢布局
apache-spark - 使用spark的ALS时如何使RMSE(均方根误差)变小？
我需要一些建议来构建一个好的模型来使用 Collaborative Filtering 进行推荐。的 Spark 。 official website中有示例代码.我还通过了以下内容: from py
java - 如何使 JTextField 变小，而不是填满整个空间？
这里我有一个用于输入区域的简单的 buildPanel 方法。我尝试使用 GridLayout(7,1)，但前 4 个 JTextField 似乎填满了其 block 的整个空间，看起来相当难看。有
javascript - p5.js 如何改变文字粗细(变小)？
需要明确的是:我知道如何更改文本的大小，我想更改文本的粗细而不更改字体。这可能吗？下面的代码是使“文本”一词出现在 Canvas 中间的基本代码。我需要更改或添加什么才能使文本厚度变薄？ funct
ios - UIScrollview - 如何在滚动屏幕时使 subview 变小
我是 iOS 的初学者，所以我不确定要在这里研究什么。我有一个添加了几个方形 subview 的 UIScrollView。如何让 subview 在滚动出屏幕时变小，在接近屏幕中心时变大？ #imp
javascript - Select 上的 ng-pattern 变小
我正在开发一个 Angular 应用程序，我需要对一个选择元素进行模式验证。仅在 select 上使用 ng-pattern 是行不通的。所以我在隐藏输入上创建了一个具有相同模型和 ng-patter
android - 动态更改源后，Xamarin Forms ImageButton 变小
我在“语言页面”上有 3 个 ImageButton，代表应用程序 (Android) 的 3 种不同语言。
android - 在 NestedScrollView 中时 MapView 变小
我得到的 CoordinatorLayout 的结构类似于: ... ... almost all elemen
android - 出现 snackbar 时使 ScrollView 变小
我刚开始在我的 android 应用程序中使用 Snackbar，但我无法将 ScrollView 缩小到不覆盖 ScrollView 内部的任何内容。这是我的 Activity 的 xml 布局:

首页

博学

6Ren·AI

商城

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