减少HTML中的输入宽度

Question

所以我有一个HTML输入标签，我需要将其宽度减小到（正常情况下）其正常宽度的80％。我尝试设置width:80%，但是没有用。我希望仅使用HTML / CSS的解决方案，但我乐于接受。我的Google搜索得出了将宽度更改为固定值（例如50像素）的结果，而不是相对于其正常宽度。谢谢！

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

Answer 1

首先，获取当前输入宽度（myInputWidth）。将其乘以某个系数（0.8）。然后修改宽度。

this.file.applicationDirectory
this.file.externalApplicationDirectory
"/sdcard/"
"/sdcard"

您可以查看此here的示例。

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

如果只打算对一个输入框执行此操作，则可以添加Inline 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% 宽度。