HTML元素寬度不一樣

我正在編碼一個MVC 5視圖，並且對於兩個視圖元素的寬度有一個問題。HTML元素寬度不一樣

這裏是視圖的圖片：

View image

這是我的代碼：

<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; 
}

來源

2015-01-09 user3736648

可以重新創建這個在撥弄你的CSS代碼？ – jmore009

可以發表小提琴或只是分享樣式表（CSS） – Aru

添加到您的CSS

.spinner { 
    width: 280px; 
}

來源

2015-01-09 04:25:30

貌似已經解決了的問題，而是以簡單的方式，而不是增加新的CSS只是改變你的代碼如下。

請不要改變像下面

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

來源

2015-01-09 06:52:56 Aravindan

HTML元素寬度不一樣

回答

相關問題