HTML 元素的宽度不同答案

【问题标题】：HTML elements are not the same widthHTML 元素的宽度不同
【发布时间】：2015-03-07 08:37:32
【问题描述】：

我正在编写一个 MVC 5 视图，并且对两个视图元素的宽度有疑问。

这是视图的图片：

这是我的代码：

<div class="form-group">
    @Html.LabelFor(model => model.width, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        <div class="input-group spinner">
            @Html.EditorFor(model => model.width, new { htmlAttributes = new { @class = "form-control" } })
            <div class="input-group-btn-vertical">
                <button type="button" id="inputSpinnerUpWidth" class="btn btn-default"><i class="fa fa-caret-up"></i></button>
                <button type="button" id="inputSpinnerDownWidth" class="btn btn-default"><i class="fa fa-caret-down"></i></button>
            </div>
        </div>
        @Html.ValidationMessage("assetwidth")
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.height, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        <div class="input-group spinner">
            @Html.EditorFor(model => model.height, new { htmlAttributes = new { @class = "form-control" } })
            <div class="input-group-btn-vertical">
                <button type="button" id="inputSpinnerUpHeight" class="btn btn-default"><i class="fa fa-caret-up"></i></button>
                <button type="button" id="inputSpinnerDownHeight" class="btn btn-default"><i class="fa fa-caret-down"></i></button>
            </div>
        </div>
        @Html.ValidationMessage("assetheight")
    </div>
</div>

Width 和 Height 元素与其他表单控件的宽度不同。如何让两个 input-group spinner 元素与其他表单控件的宽度相同？

这是"Asset name" HTML 元素的视图代码：

<div class="form-group">
    @Html.LabelFor(model => model.name, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.name, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.name, "", new { @class = "text-danger" })
    </div>
</div>

提前致谢。

编辑

这是微调器 css 代码：

.spinner input {
  text-align: right;
}
.input-group-btn-vertical {
  position: relative;
  white-space: nowrap;
  vertical-align: middle;
  display: table-cell;
}
.input-group-btn-vertical > .btn {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
  padding: 8px;
  margin-left: -1px;
  position: relative;
  border-radius: 0;
}
.input-group-btn-vertical > .btn:first-child {
  border-top-right-radius: 4px;
}
.input-group-btn-vertical > .btn:last-child {
  margin-top: -2px;
  border-bottom-right-radius: 4px;
}
.input-group-btn-vertical i{
  position: absolute;
  top: 0;
  left: 4px;
}

在Site.css中，有如下代码：

input,
select,
textarea {
    max-width: 280px;
}

如何将input-group spinner 添加到上述 CSS 中？

我尝试了以下方法：

input,
select,
spinner,
textarea {
    max-width: 280px;
}

【问题讨论】：

你能用小提琴重新创建这个吗？
你能发个小提琴还是分享样式表（css）

标签： html asp.net-mvc-5 width html-input asp.net-mvc-views

【解决方案1】：

将此添加到您的 CSS 中

.spinner {
  width: 280px;
}

【讨论】：

【解决方案2】：

看起来问题已经解决了，但是用一种简单的方式而不是添加新的 CSS，只需像下面这样更改您的代码。

请更改您的 css 代码，如下所示

input,
select,
.spinner,
textarea {
     max-width: 280px;
}

【讨论】：