需要跨度出现在另一个跨度的中间和下方

Question

尝试做这样的事情

尝试了一堆不同的组合。无法让它发挥作用。

    <div>
        <div style="display: inline-block">
            <span>QTY On Order<span>0</span></span>
        </div>
        <div style="display: inline-block">
            <span>QTY Needed<span>0</span></span>
        </div>
        <div style="display: inline-block">
            <span>QTY In Stock<span>320</span></span>
        </div>
        <div style="display: inline-block">
            <span>QTY Consumed<span>20</span></span>
        </div>
    </div>

https://jsfiddle.net/phv7mbt3/

Answer 1

以下是您修改后的代码：

＆＃13;

＆＃13;

<div>
            <div style="display: inline-block; text-align:center;">
                <span>QTY On Order<span style="display: block">0</span></span>
            </div>
            <div style="display: inline-block">
                <span>QTY Needed<span style="display: block">0</span></span>
            </div>
            <div style="display: inline-block">
                <span>QTY In Stock<span style="display: block">320</span></span>
            </div>
            <div style="display: inline-block">
                <span>QTY Consumed<span style="display: block">20</span></span>
            </div>
        </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这应该有效：

＆＃13;

＆＃13;

div > div > span {
  text-align: center;
  margin: 0 10px;
}
div > div > span > span {
  display: block;
  font-weight: bold;
}

＆＃13;

<div>
    <div style="display: inline-block">
        <span>QTY On Order<span>0</span></span>
    </div>
    <div style="display: inline-block">
        <span>QTY Needed<span>0</span></span>
    </div>
    <div style="display: inline-block">
        <span>QTY In Stock<span>320</span></span>
    </div>
    <div style="display: inline-block">
        <span>QTY Consumed<span>20</span></span>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

另外，您应该考虑使用class属性来选择css中的元素。

Answer 3

新守则：

        <div>
        <div class="qty" style="display: inline-block">
        <span>QTY On Order</span>
        <p>0</p>
        </div>
        <div class="qty" style="display: inline-block">
        <span>QTY Needed</span>
        <p>0</p>
        </div>
        <div class="qty" style="display: inline-block">
        <span>QTY In Stock</span>
        <p>320</p>
        </div>
        <div class="qty" style="display: inline-block">
        <span>QTY Consumed</span>
        <p>20</p>
        </div>
    </div>

CSS：

.qty{
  float:left;
  text-align: center;
  padding:10px;
}

Answer 4

请参阅此fiddle

您只需将span替换为div即可。此外，HTML结构应该略有变化。

要使文字居中，您只需应用新的CSS规则 - text-align:center。

更新了HTML

<div>
  <div style="display: inline-block">
    <div style="text-align:center;">QTY On Order</div>
    <div style="text-align:center;">0</div>
  </div>
  <div style="display: inline-block">
    <div style="text-align:center;">QTY Needed</div>
    <div style="text-align:center;">0</div>
  </div>
  <div style="display: inline-block">
    <div style="text-align:center;">QTY In Stock</div>
    <div style="text-align:center;">320</div>
  </div>
  <div style="display: inline-block">
    <div style="text-align:center;">QTY Consumed</div>
    <div style="text-align:center;">20</div>
  </div>
</div>