0

我对如何提出这个问题并不积极，但如果你看一下这个 jsfiddle，你可以看出我的跨度的宽度与我的输入的宽度是不同的，尽管它们都表示为 14% 500px 父元素。(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;
}​
4

3 回答 3

4

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

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

更新了 jsFiddle

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

    // Added these
    border: none;
    background: red;
}​
于 2012-11-09T21:43:59.777 回答
0

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

| <边距> | (边框) <填充> | <宽度> | <填充>（边框）| <边距> |

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

于 2012-11-09T21:45:47.713 回答
0

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

jsfiddle.net/5ay3J/11/

于 2012-11-09T21:48:36.367 回答