如何在css/php中做一个围绕时间的正方形方框？
如何在css/php中做一个围绕时间的正方形方框？
提问于 2018-08-21 02:55:28
我在一个网站上工作，在这个网站上，我想做一个正方形的盒子周围的时间。
我使用的php代码是：
{
echo date('l', strtotime($key)).": ".$value['start']." ".$value['end']."<br/> <br/>";
}上面的php完成了以下日期和时间：
问题陈述：
我想知道我应该在上面的php代码中做什么修改，这样我就可以在time周围放置方框，就像这样：
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-21 09:03:21
PHP与设计无关。而且您绝对不应该使用字符(如 )来创建空格/边距
演示：https://www.tehplayground.com/WtTs8Yk0pRw8wHAu
改用CSS：
* {margin:0; box-sizing:border-box;}
html,body {height:100%; font:14px/1.4 sans-serif;}
.times {
display: inline-flex; /* act as inline */
flex-flow: row wrap; /* wrap into flex rows */
}
.times>* {
flex: 1 0 25%; /* 25%, so subdivision by 4 elements */
text-align: center;
padding: 5px;
margin: 5px 0;
}
.times>*:nth-child(2n) { /* every second child element (time SPAN) */
border: 1px solid #ddd;
border-radius: 3px;
}<div class="times">
<span>mon:</span>
<span>09:00</span>
<span>to</span>
<span>21:00</span>
<span>tue:</span>
<span>09:00</span>
<span>to</span>
<span>21:00</span>
<span>wed:</span>
<span>09:00</span>
<span>to</span>
<span>21:00</span>
</div>
所以在你的PHP foreach中，简单的echo如下：
echo '
<span>'. date('l', strtotime($key)) .':</span>
<span>'. $value['start'] .'</span>
<span>to</span>
<span>'. $value['end'] .'</span>
';Stack Overflow用户
发布于 2018-08-21 03:11:22
我在时间值周围添加了圆角框。圆角框是使用名为box的CSS类创建的。将此代码放在页面的页眉部分
<style>
.box{
background-color: #4CAF50;
border-radius: 12px;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>并按如下方式更改php代码
echo date('l', strtotime($key)).": <span class='box' >".$value['start']."</span> <span class='box' >".$value['end']."</span><br/> <br/>"; 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51936923
复制相关文章
相似问题