.NET MVC HTML.TextBox在屏幕上非常不成比例

Question

正如标题所示，我正在使用.NET MVC＆＃39; html.textboxfor＆＃39;剃刀命令。

由于某些原因，我的css类导致这些输入字段与其原始静态对应字段大不成比例。

下面的屏幕截图只有标题部分，其中包含一个输入框，其大小正确：

但是只要我让价格部分可编辑，就会发生这种情况：

这是我用来生成HTML的html表（位于循环中）：

<table width="1%">
<tr>
    <td colspan="2">
    @Html.TextBoxFor(m => m.Title[outer], new { @class = "title", @Value="Title"})
    </td>
</tr>
<tr>
    <td>

            @Html.TextBoxFor(m => m.Title[outer], new { @class = "rands", @Value = "99" })

    </td>
    <td>
        <table>
            <tr>
                <td>

                        @Html.TextBoxFor(m => m.Title[outer], new { @class = "cents", @Value = "Title" })


                </td>
            </tr>
            <tr>
                <td>
                    <span class="units">each</span>
                </td>
            </tr>
        </table>
    </td>
</tr>

这些是CSS类：

.title {
font-size: 6vh;
margin-top: 2vh;
position: relative;
text-align: center;
top: 4vh;
width: 100%;
}

.rands{
font-size:25vh;
font-weight:700;
margin:0px !important;
}

.cents {
    bottom: 14vh;
    font-size: 12vh;
    font-weight: 700;
    left: 15vw;
    margin: 0;
}

任何见解都将受到赞赏！

Answer 1

您使用vh单位作为字体大小。这或多或少相当于当前视口高度的百分比因此巨大。

您可以通过多种方式在css中调整字体大小，但我个人会选择以下内容：

html {
   font-size: 10px;
}

.title {
   font-size: 2rem;
   ...
}

.rands{
   font-size: 3rem;
   ...
}

.cents {
    font-size: 2rem;
    ...
}

rem根据基本（html元素）像素字体大小设置字体大小，以便您可以快速扩展。

我建议您详细了解字体大小和px，em，rem