制作响应时间表,切换到移动设备的列表格式,工作日作为标题,下面列出相关会话。 我遇到了li元素重叠的问题。 尽管尝试了位置和显示值,但我无法弄清楚如何抵消这种重叠。 任何帮助,将不胜感激。
.smallTableContainer { position: relative; display: none; height: auto; overflow: hidden; } .weekdayHeader { background: #bc4b51; color: #efefef; font-size: 18pt; padding: 10px 0px; } .sessions { padding: 0; } .className { float: left; display: inline-block; color: #1e1e1e; font-size: 13pt; padding-left: 10px; } .classTime { float: right; display: inline-block; color: #1e1e1e; font-size: 12pt; padding-right: 10px; }<div class="smallTableContainer"> <h3 class="weekdayHeader">Monday</h3> <ul class="sessions"> <li> <div class="className"> Warrior Cubs Kickboxing <br>AGES 5-7 <br>[ SPACES AVAILABLE ] </div> <div class="classTime"> <br> 16.15pm - 17.00pm </div> </li> <li> <div class="className"> Warrior Cubs Kickboxing <br>AGES 8-12 <br>[ SPACES AVAILABLE ] </div> <div class="classTime"> <br> 17.00pm - 17.45pm </div> </li> </ul> </div>Making a responsive timetable which switches to a list format for mobile, with Weekdays acting as headers and relevant sessions being listed below. I've encountered a problem where li elements overlap. Despite experimenting with position and display values, I can't figure out how to counteract this overlap. Any help would be appreciated.
.smallTableContainer { position: relative; display: none; height: auto; overflow: hidden; } .weekdayHeader { background: #bc4b51; color: #efefef; font-size: 18pt; padding: 10px 0px; } .sessions { padding: 0; } .className { float: left; display: inline-block; color: #1e1e1e; font-size: 13pt; padding-left: 10px; } .classTime { float: right; display: inline-block; color: #1e1e1e; font-size: 12pt; padding-right: 10px; }<div class="smallTableContainer"> <h3 class="weekdayHeader">Monday</h3> <ul class="sessions"> <li> <div class="className"> Warrior Cubs Kickboxing <br>AGES 5-7 <br>[ SPACES AVAILABLE ] </div> <div class="classTime"> <br> 16.15pm - 17.00pm </div> </li> <li> <div class="className"> Warrior Cubs Kickboxing <br>AGES 8-12 <br>[ SPACES AVAILABLE ] </div> <div class="classTime"> <br> 17.00pm - 17.45pm </div> </li> </ul> </div>最满意答案
如果我正确理解了您想要的结果,您希望事件和时间在各行上消失。 为了做到这一点,你所寻找的只是cleart: both你的.sessions li 。 除此之外,您可能希望在每个事件之间添加一些间距,这可以通过将margin-top添加到(相当复杂的) .sessions li:not(:first-of-type) .className选择。 这确保了保证金将应用于除第一个之外的所有列表。
这可以在以下内容中看到:
.smallTableContainer { position: relative; /*display: none;*/ height: auto; overflow: hidden; } .weekdayHeader { background: #bc4b51; color: #efefef; font-size: 18pt; padding: 10px 0px; } .sessions { padding: 0; } .sessions li { clear: both; } .className { float: left; display: inline-block; color: #1e1e1e; font-size: 13pt; padding-left: 10px; } .classTime { float: right; display: inline-block; color: #1e1e1e; font-size: 12pt; padding-right: 10px; } .sessions li:not(:first-of-type) .className { margin-top: 20px; }<div class="smallTableContainer"> <h3 class="weekdayHeader">Monday</h3> <ul class="sessions"> <li> <div class="className"> Warrior Cubs Kickboxing <br>AGES 5-7 <br>[ SPACES AVAILABLE ] </div> <div class="classTime"> <br> 16.15pm - 17.00pm </div> </li> <li> <div class="className"> Warrior Cubs Kickboxing <br>AGES 8-12 <br>[ SPACES AVAILABLE ] </div> <div class="classTime"> <br> 17.00pm - 17.45pm </div> </li> </ul> </div>If I understand your desired result correctly, you want the events and times to disaply on individual lines. In order to do this, all you're looking for is cleart: both on your .sessions li. In addition to this, you'll probably want to add a bit of spacing between each event, which can be done by adding margin-top to the (rather complex) .sessions li:not(:first-of-type) .className selector. This ensures that the margin will be applied to all of the listings apart from the first one.
This can be seen in the following:
.smallTableContainer { position: relative; /*display: none;*/ height: auto; overflow: hidden; } .weekdayHeader { background: #bc4b51; color: #efefef; font-size: 18pt; padding: 10px 0px; } .sessions { padding: 0; } .sessions li { clear: both; } .className { float: left; display: inline-block; color: #1e1e1e; font-size: 13pt; padding-left: 10px; } .classTime { float: right; display: inline-block; color: #1e1e1e; font-size: 12pt; padding-right: 10px; } .sessions li:not(:first-of-type) .className { margin-top: 20px; }<div class="smallTableContainer"> <h3 class="weekdayHeader">Monday</h3> <ul class="sessions"> <li> <div class="className"> Warrior Cubs Kickboxing <br>AGES 5-7 <br>[ SPACES AVAILABLE ] </div> <div class="classTime"> <br> 16.15pm - 17.00pm </div> </li> <li> <div class="className"> Warrior Cubs Kickboxing <br>AGES 8-12 <br>[ SPACES AVAILABLE ] </div> <div class="classTime"> <br> 17.00pm - 17.45pm </div> </li> </ul> </div>
更多推荐
发布评论