減少 HTML 中輸入的寬度

Question

所以我在 HTML 中有一個 input 標簽，我需要將其寬度減小到（假設）其正常寬度的 80%。 我試過設置width:80%但這沒有用。 我更喜歡只使用 HTML/CSS 的解決方案，但我對任何事情都持開放態度。 我的 Google 搜索結果將寬度更改為固定數量，例如 50 像素，而不是相對於其正常寬度。 謝謝！

<input id="myInput" type="text">

Answer 1

首先，獲取當前輸入寬度（myInputWidth）。 乘以某個因子 (0.8)。 然后修改寬度。

var myInputWidth = (document.getElementById("myInput").offsetWidth);

document.getElementById("myInput").style.width = myInputWidth * 0.8 + "px";

您可以在此處查看一個示例。

Answer 2

使用 CSS 非常簡單。 看一下這個！

 .input-box{ width:100px }

 <input id="myInput" class="input-box" type="text">

這就是你想要的希望這對你有幫助。

問候。

Answer 3

您可以將輸入元素放在容器中，設置所述容器的寬度，然后以百分比形式修改輸入的寬度。

Answer 4

 #input { width: calc(0.8 * 500px); /* 80% = 0.8 && 500px is the input element's initial width. Just for example I took 500px */ }

 <input type="text" id="input">

Answer 5

如果您打算僅對一個輸入框執行此操作，則可以添加內聯 Css

<input type="text" id="input" style="width:100px">

Answer 6

你需要一個塊元素。 例如：

<div class="myBox">
<input class="myInput" type="text">
</div>

.myBox {
display: block;
width: 100px;
}

.myInput {
width: 80%;
}

此方法您的輸入占用父項（div、myBox）的 80% 寬度。