Question

我已经创建了以下输入标签/文本框，但是它很大并且在页面上运行。无论如何我可以改变文本框的大小，使它比现在小很多吗？我的代码如下：

<div class="slds-form-element">
  <label class="slds-form-element__label" for="text-input-01">Input Label</label>
  <div class="slds-form-element__control slds-input-has-fixed-addon">
    <span class="slds-form-element__addon">$</span>
    <input id="text-input-01" class="slds-input" type="text" placeholder="Placeholder Text" />
    <span class="slds-form-element__addon">%</span>
  </div>
</div>

PS：我在Lightning中这样做，所以我的CSS已经安装好了。不幸的是，我不允许编辑CSS并且必须找到另一种方法来调整它。我fsomeone可以帮助我，这将真的有帮助。

Answer 1

如果css绝对不可能，您可以随时添加内联样式规则。这通常不被认为是最佳做法，但如果您只剩下这些，则可能没有其他选择。

<div style="width:300px;" class="slds-form-element">
  <label class="slds-form-element__label" for="text-input-01">Input Label</label>
  <div class="slds-form-element__control slds-input-has-fixed-addon">
    <span class="slds-form-element__addon">$</span>
    <input id="text-input-01" class="slds-input" type="text" placeholder="Placeholder Text" />
    <span class="slds-form-element__addon">%</span>
  </div>
</div>

Answer 2

 <style>
            input, button, select, textarea {
    width: 100%;
}
        </style>
        <div class="slds-form-element">
  <label class="slds-form-element__label" for="text-input-01">Input Label</label>
  <div class="slds-form-element__control slds-input-has-fixed-addon">
    <span class="slds-form-element__addon">$</span>`enter code here`
    <input id="text-input-01" class="slds-input" type="text" placeholder="Placeholder Text" />
    <span class="slds-form-element__addon">%</span>
  </div>
</div>

如何更改此文本框的大小？

2 个答案: