如何拉直彼此相邻排列的div

时间:2013-02-04 17:49:06

标签: html css

直接拉直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;
}

0 个答案:

没有答案