Question

我使用ul li创建了一个包含列表的表格。这是我的HTML代码。

<div style="" class="first_calendar clendar-wrapper calendar-1">

     <ul class="calendar ">
       <li class="calen-title"><a href="#">Sunday  <br>Mar 22</a></li>               
       <li class="" style="min-height:40px;"><a data-day="7" rel="21" href="#"> 6:00 am</a> </li>
       <li class="" style="min-height:40px;"><a data-day="7" rel="22" href="#"> 6:15 am</a> </li>
    </ul>
    <ul class="calendar ">
       <li class="calen-title"><a href="#">Monday  <br>Mar 23</a></li>
       <li class="" style="min-height:40px;"><a data-day="1" rel="21" href="#"> 6:00 am</a> </li>
       <li class="" style="min-height:40px;"><a data-day="1" rel="22" href="#"> 6:15 am</a> </li>
    </ul>
    <ul class="calendar ">
       <li class="calen-title"><a href="#">Tuesday  <br>Mar 24</a></li>
       <li class="" style="min-height:40px;"><a data-day="2" rel="21" href="#"> 6:00 am</a> </li>
       <li class="" style="min-height:40px;"><a data-day="2" rel="22" href="#"> 6:15 am</a> </li>
    </ul>
</div>

这是我的css代码。

.calendar{

    margin: 0;
    padding: 0;
    /*width: 40px;*/
    list-style: none;
    float:left;

}
.clendar-wrapper{
    /*float: left;*/

    /*background-image: url("../img/table_bg.png");*/
    background-position: 0 -58px;
    /*float: left;*/
}
.clendar-wrapper{
    display: none;

    display: none;
    width: 100%;
    max-height:350px;   overflow-x:hidden ;   padding-bottom:10px; 
}
.table-responsive {
    width: 918px;
    /*border:1px solid red;*/
    background-color: #FFFFFF;
    overflow: visible;
}


@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
    .clendar-wrapper{ 
        width: 100%;
        height:auto;   
    } /* your css rules for ipad portrait */
}
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
    .clendar-wrapper{   
        /*width: 100%;*/
        height:auto;   

    } /* your css rules for ipad landscape */
}

.calendar-1{
    display: block;
}
.prev-table{
    display: none;
}

.login_register a {
    color:white;
}

.calen-title {
    background-color: #D9E8F4 !important;
}

.calen-title a{
    font-size: 16px;
    color: #222; 
    font-weight: bold;

}

.calendar li{
    padding: 8px;
    border: 1px solid #ddd;
}

.calendar li a {
    color: #222;
    font-size: 16px;
}



.calendar li:nth-child(2n+2) {
    background-color: #f9f9f9;
}

.pagi_list .pre_btn, .pagi_list .nex_btn{
    margin: 0px;
}

.last_link, .first_link {
    font-size: 35px;
    font-weight: bold;
    line-height: 0;
    position: relative;
    top: 5px;
    color:#d65c4f;
}

它在bootstrap上编码。当我在小分辨率设备上打开它时，列下拉。在这里，我创建了一个演示链接click here to open。请告诉我如何使这个日历响应。

提前致谢。

Answer 1

使用媒体查询时，通常不需要设置设备的高度，只需设置宽度。设备的方向设置宽度，因此如果您在纵向和横向之间切换，媒体查询仍然有效。

您可以让日历包装100％但最多700px，这使得每天100px完全适合它，然后如果屏幕小于700px，您可以将它们移动到垂直排列。我只是使用一个简单的媒体查询＆gt;将一个例子拼凑在一起。 https://jsfiddle.net/pfg1dxfy/您将看到通过抓取javascript窗口和结果窗口之间的栏并调整其大小，表格将根据宽度发生变化。

我还添加了一个简单的明确修复，浮动元素时需要这个。在CSS中，它是.clear {clear：both;}然后你将它包含在所有浮动元素之后

.calendar{
    margin: 0;
    padding: 0;
    list-style: none;
    float:left;
    width: 100px;
}

.clendar-wrapper{
    width: 100%;
    max-width: 700px;
    margin: auto;
}

@media (max-width: 699px) {
    .calendar{
        width: 100%;
        float: none;
        margin: 30px 0;
    }
}

如何使列表响应的html表格？

1 个答案: