Question

我正在一个网站上工作，我想在这个网站上经常做一个方框。

我用来缩短时间的php代码是：

{
echo date('l', strtotime($key)).":&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;".$value['start']."&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;".$value['end']."<br/> <br/>";      
}

上面的php在以下日期和时间开始运行：

问题陈述：

我想知道我应该在上面的php代码中进行哪些更改，以便可以将方盒放在周围，如下所示：

Answer 1

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>
';

Answer 2

我在时间值周围添加了圆角框。使用称为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)).":&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class='box' >".$value['start']."</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class='box' >".$value['end']."</span><br/> <br/>";

如何在css / php中制作一个方形框？

2 个答案: