CSS日历对齐方式
[英]CSS Calendar alignments
问题描述
我是CSS的新手，我制作了这个日历，我需要这个日历以适合JSP页面。
- 这涵盖了整个页面。 任何人都可以建议如何调整大小
- 另外，当我必须将箱子放空时，随着箱子上下移动，每月的第一天要移动到星期几。 该怎么做才能解决这个问题
- 有没有更好的方法可以做到这一点，需要用工具提示来做到这一点。 感谢您的光临。
* { box-sizing: border-box; } ul { list-style-type: none; } body { font-family: Verdana, sans-serif; } .month { padding: 70px 25px; width: 100%; background: #1abc9c; } .month ul { margin: 0; padding: 0; } .month ul li { color: white; font-size: 20px; text-transform: uppercase; letter-spacing: 3px; } .month .prev { float: left; padding-top: 10px; } .month .next { float: right; padding-top: 10px; } .weekdays { margin: 0; padding: 10px 0; background-color: #ddd; } .weekdays li { display: inline-block; width: 13.6%; color: #666; text-align: center; } .days { padding: 10px 0; background: #eee; margin: 0; } .days li { list-style-type: none; display: inline-block; width: 13.6%; height: 75px; text-align: center; margin-bottom: 20px; font-size: 17px; border: 3px solid #73AD21; color: #777; } .days li .active { padding: 5px; background: #1abc9c; color: white !important } /* Add media queries for smaller screens */ @media screen and (max-width:720px) { .weekdays li, .days li { width: 13.1%; } } @media screen and (max-width: 420px) { .weekdays li, .days li { width: 12.5%; } .days li .active { padding: 2px; } } @media screen and (max-width: 290px) { .weekdays li, .days li { width: 12.2%; } } .tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 1s; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }
<!DOCTYPE html> <html> <head/> <body> <h1>CSS Calendar</h1> <div class="month"> <ul> <li class="prev">❮</li> <li class="next">❯</li> <li style="text-align:center"> August<br> <span style="font-size:18px">2016</span> </li> </ul> </div> <ul class="weekdays"> <li>Mo</li> <li>Tu</li> <li>We</li> <li>Th</li> <li>Fr</li> <li>Sa</li> <li>Su</li> </ul> <ul class="days"> <li> </li> <li>1<br><br>$1.25 </li> <li>2<br><br>$1.25 </li> <li>3<br><br>$1.25 </li> <li>4<br><br>$1.25 </li> <li>5<br><br>$1.25 </li> <li>6<br><br>$1.25 </li> <li>7<br><br>$1.25 </li> <li>8<br><br>$1.25 </li> <li>9<br><br>$1.25 </li> <li>10<br><br>$1.25 </li> <li>11<br><br>$1.25 </li> <li>12<br><br>$1.25 </li> <li>13<br><br>$1.25 </li> <li>14<br><br>$1.25 </li> <li>15<br><br>$1.25 </li> <li>16<br><br>$1.25 </li> <li>17<br><br>$1.25 </li> <li>18<br><br>$1.25 </li> <li>19<br><br>$1.25 </li> <li>20<br><br>$1.25 </li> <li>21<br><br>$1.25 </li> <li>22<br><br>$1.25 </li> <li>23<br><br>$1.25 </li> <li>24<br><br>$1.25 </li> <li> <div class="tooltip">25<br><br>$1.25 <span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span> </div> </li> <li> <div class="tooltip">26<br><br>$1.25 <span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span> </div> </li> <li> <div class="tooltip">27<br><br>$1.25 <span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span> </div> </li> <li> <div class="tooltip">28<br><br>$1.25 <span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span> </div> </li> <li> <div class="tooltip">29<br><br>$1.25 <span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span> </div> </li> <li> <div class="tooltip">30<br><br>$1.25 <span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span> </div> </li> <li> <div class="tooltip">31<br><br>$1.25 <span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span> </div> </li> </ul> </body> </html>
1 个解决方案
解决方案1
0 2017-08-13 06:32:20
我不确定这是否是您要寻找的。
- 使用
vertical-align: bottom固定框对齐。 - 使用
margin: 0 auto将日历在页面中水平居中。
https://jsfiddle.net/yxhgq1tz/3/
.wrapper {
width: 500px;
margin: 0 auto;
}
垂直居中。 有几种选择。
- 使用css3 flexbox。
- 使用
vertical-align: middle与display: table
GWT标签对齐方式和CSS
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.