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

入力ボックスの幅には、すべてのブラウザーがそれらの周りに描画する境界線がありません (それらが表示される唯一の実際のものです)。span 要素の周りに 1px の実線の黒い境界線を配置すると、それがわかります。これがCSS ボックス モデルの仕組みであり、単純に次のように表されます。

| | <余白> | (ボーダー) < パディング > | <幅> | < パディング > (ボーダー) | <余白> |

さらに、テキストボックスを配置border:noneすると、背景色がコンテナーの色と一致すると、テキストボックスが消えたように見えます。

于 2012-11-09T21:45:47.713 に答える
0

ボディの背景が白であると仮定すると、width:14% を維持する最も簡単な方法は、スパンに 1 ピクセルの境界 #fff を与えることです。

jsfiddle.net/5ay3J/11/

于 2012-11-09T21:48:36.367 に答える