0

隣接する div をまっすぐにする最良の方法は何ですか? 試してみましたが、すべてがわずかに比例しているように見えます。各列を隣り合わせに配置する方法が必要です (変更が発生する可能性がありますが)。

ここに私のコードがあります: http://jsfiddle.net/j3cY5/2/

更新:サンプルでは jQuery の datepicker が機能していないようです :-(

HTML

<div class="schedule_wrapper">
    <div class="schedule_item">
        <div style="background-color:#08011c; color: #FFF; padding: 5px;">Task</div>
        <div style="height: 20px; padding-top: 4px;">Item 1</div>
        <br>
        <div style="height: 20px; padding-top: 4px;">Item 2</div>
        <br>
        <div style="height: 20px; padding-top: 4px;">Item 3</div>
        <br>
        <div style="height: 20px; padding-top: 4px;">Item 4</div>
        <br>
        <div style="height: 20px; padding-top: 4px;">Item 5</div>
        <br>
    </div>
    <div class="schedule_item">
        <div style="background-color:#08011c; color: #FFF; padding: 5px;">Due Date</div>
        <div style="height: 17px; padding-top: 2px;">
            <input type="text" id="datepicker1" style="width: 100px;
                    height: 10px;" value="" class="hasDatepicker">
        </div>
        <br>

        <div style="height: 17px; padding-top: 2px;">
            <input type="text" id="datepicker2" style="width: 100px;
                    height: 10px;" value="" class="hasDatepicker">
        </div>
        <br>

        <div style="height: 17px; padding-top: 2px;">
            <input type="text" id="datepicker3" style="width: 100px;
                    height: 10px;" value="" class="hasDatepicker">
        </div>
        <br>

        <div style="height: 17px; padding-top: 2px;">
            <input type="text" id="datepicker4" style="width: 100px;
                    height: 10px;" value="" class="hasDatepicker">
        </div>
        <br>

        <div style="height: 17px; padding-top: 2px;">
            <input type="text" id="datepicker5" style="width: 100px;
                    height: 10px;" value="" class="hasDatepicker">
        </div>
        <br>
    </div>
    <div class="schedule_item">
        <div style="background-color:#08011c; color: #FFF; padding: 5px;">Status</div>
        <div>
            <select style="height: 30px; width: 100px;">
                <option></option>
                <option>----</option>
            </select>
        </div>
        <br>
        <div>
            <select style="height: 30px; width: 100px;">
                <option></option>
                <option>----</option>
            </select>
        </div>
        <br>
        <div>
            <select style="height: 30px; width: 100px;">
                <option></option>
                <option>----</option>
            </select>
        </div>
        <br>
        <div>
            <select style="height: 30px; width: 100px;">
                <option></option>
                <option>----</option>
            </select>
        </div>
        <br>
        <div>
            <select style="height: 30px; width: 100px;">
                <option></option>
                <option>----</option>
            </select>
        </div>
        <br>
    </div>
    <div class="schedule_item">
        <div style="color: #FFF; padding: 5px;">&nbsp;</div>
        <div>
            <input type="submit" id="update" value="Update" style="width: 100px;">
        </div>
        <br>
        <div>
            <input type="submit" id="update" value="Update" style="width: 100px;">
        </div>
        <br>
        <div>
            <input type="submit" id="update" value="Update" style="width: 100px;">
        </div>
        <br>
        <div>
            <input type="submit" id="update" value="Update" style="width: 100px;">
        </div>
        <br>
        <div>
            <input type="submit" id="update" value="Update" style="width: 100px;">
        </div>
        <br>
    </div>
</div>

CSS

.schedule_wrapper {
    overflow:hidden;
    margin-bottom:10px;
}
.schedule_item {
    float:left;
    margin:2px;
}
body {
font-family: Verdana;
}
input[type="submit"] {
    background: #52A8E8;
    border: 0;
    border-bottom: 2px solid #4081AF;
    color: #fff;
    padding: 9px 21px;
    text-align: center;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: auto;
}
input[type="submit"]:hover, input[type="submit"]:active {
    cursor: pointer;
    background: #377AD0;
    border: 0;
    border-bottom: 2px solid transparent;
}
input[type="submit"] + a {
    margin-left: 22px;
}
4

0 に答える 0