Question

我不确定这是否可行，但我想在div中为每个数字添加边框。

我知道如何为div添加边框，但我希望div中的每个数字都有边框。

示例：

<div id="borders">12345</div>

输出应如下所示：

(1) (2) (3) (4) (5)

其中＆＃34;（）＆＃34;是边界。

PS：我不想为每个号码使用单独的div，因为这个号码将是一个php代码，如下所示：

<div id="borders"><?php $number; ?></div>

有可能吗？

Answer 1

如果不添加额外标记，则无法实现：

实例：http://codepen.io/anon/pen/gDHlA

<强>标记

<div id="borders">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
</div>

<强>的CSS

span:before, span:after {
  display: inline-block;
}

span:before {
  content: "(";
}

span:after {
  content: ")";
}

我已经插入了parens，当然可以随意使用竖线（|）更改它们或使用应用于span元素的边框（在这种情况下，还可以给它们显示，宽度和高度）

关于您的最新要求，您的代码可以很容易地进行调整：

$number = 12345;
$span_number = "";

foreach (str_split($number) as $key => $digit) {
  $span_number .= "<span>$digit</span>";
}

echo $span_number;
//output: <span>1</span><span>2</span>...<span>5</span>

Answer 2

我认为这是不可能的。您可以将每个数字换成<span>并为跨度设置边框

Answer 3

你可以使用这样的span元素，但是你必须根据数字构建所有标签，使用php字符串函数来分割每个数字。没有标签就没有办法做到这一点。

<div id="borders">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
</div>

你的CSS：

#borders span {
    display:inline-block;
    border:1px solid red;
    padding:2px;
    margin:2px;/*if you want space between numbers*/
}

为div中的每个数字添加边框

3 个答案: