输入的宽度是否比其他元素占用更多空间？答案

【问题标题】：Does the width of inputs take more space than other elements?输入的宽度是否比其他元素占用更多空间？
【发布时间】：2012-10-30 06:21:13
【问题描述】：

我不知道如何提出这个问题，但如果你看看this jsfiddle，你可以看出我的跨度宽度与我输入的宽度是不同的，尽管它们都被表达了作为 500px 父元素的 14%。（7 x 14% = 98%）。

HTML：

<div class="timesheet-subheader-weekdays-div">
    <span id="timesheet-subheader-monday" class="timesheet-subheader-weekday">Mon<br /></span>
    <span id="timesheet-subheader-tuesday" class="timesheet-subheader-weekday">Tue<br /></span>
    <span id="timesheet-subheader-wednesday" class="timesheet-subheader-weekday">Wed<br /></span>
    <span id="timesheet-subheader-thursday" class="timesheet-subheader-weekday">Thu<br /></span>
    <span id="timesheet-subheader-friday" class="timesheet-subheader-weekday">Fri<br /></span>
    <span id="timesheet-subheader-saturday" class="timesheet-subheader-weekday">Sat<br /></span>
    <span id="timesheet-subheader-sunday" class="timesheet-subheader-weekday">Sun<br /></span>
</div>
<div class="timesheet-daily-entry-fields-container">
    <input id="TimesheetMondayHours" class="timesheet-daily-input timesheet-monday-hours"/>
    <input id="TimesheetTuesdayHours" class="timesheet-daily-input timesheet-tuesday-hours"/>
    <input id="TimesheetWednesdayHours" class="timesheet-daily-input timesheet-wednesday-hours"/>
    <input id="TimesheetThursdayHours" class="timesheet-daily-input timesheet-thursday-hours"/>
    <input id="TimesheetFridayHours" class="timesheet-daily-input timesheet-friday-hours">
    <input id="TimesheetSaturdayHours" class="timesheet-daily-input timesheet-saturday-hours"/>
    <input id="TimesheetSundayHours" class="timesheet-daily-input timesheet-sunday-hours"/>
</div>

CSS：

.timesheet-subheader-weekdays-div {    
    position:relative;
    float:left;
    width:500px;
}
.timesheet-subheader-weekday {
    position:relative;
    float:left;
    width:14%;
    text-align:center;
    line-height:15px;
    font-size:11px;
}
.timesheet-daily-entry-fields-container {
    position:relative;
    float:left;
    width:500px;
}
.timesheet-daily-input {
    position:relative;
    float:left;
    width:14%;
    text-align:center;
}

【问题讨论】：

标签： html css input width

【解决方案1】：

这是因为输入框的边框。输入的边框默认为 1px。因此，边框添加的额外宽度导致您的最后一个元素低于其余元素。

更新了您的小提琴，因此您可以通过删除边框来查看它们按您想要的方式流动。

Updated jsFiddle

.timesheet-daily-input {
    position:relative;
    float:left;
    width:14%;
    text-align:center;

    // Added these
    border: none;
    background: red;
}

【讨论】：

最好在工作日也加个边框，这样输入框就可以正常显示了。然后增加容器的宽度以适应边框（如果我没记错的话，总共 14px *（边框宽度））

【解决方案2】：

假设你的 body bg 是白色的，保持 width:14% 工作的最简单方法是给你的 span 设置一个 1px 边框#fff。

jsfiddle.net/5ay3J/11/

【讨论】：

【解决方案3】：

输入框的宽度没有每个浏览器在它们周围绘制的边框（它们是使它们可见的唯一实际事物）。当您在 span 元素周围放置一个 1px 纯黑色边框时，您可以看到这一点。这就是CSS box model 的工作原理，简单表示如下：

| | (边框) | | （边框）| |

另外，如果您将border:none 放在文本框上，当背景颜色与容器颜色匹配时，它们似乎会消失。

【讨论】：