Question

我对如何提出这个问题并不乐观，但是如果你看看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;
}

Answer 1

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

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

Updated jsFiddle

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

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

Answer 2

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

| ＆LT;保证金＆gt; | （边界）＆lt;填充＆gt; | ＆LT;宽度＆gt; | ＆LT;填充＆gt; （边界）| ＆LT;保证金＆gt; |

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

Answer 3

假设你的身体是白色的，保持宽度的最简单方法是：14％工作是给你的跨度1px边界#fff。

jsfiddle.net/5ay3J/11 /

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

3 个答案: