1

我希望我的成品看起来像这样：

   My

Shopping

  Cart

到目前为止，我已经让它工作了，但我使用了三个段落标签

<div><p>My</p><p>Shopping</p><p>Cart</p></div>
  • 最外面的 div 有width:200px
  • P标签是width:100%和text-align:center
  • JS小提琴示例

有没有办法在没有所有 p 标签的情况下做到这一点？我不需要摆脱它们，但我喜欢认为有更好的方法。

4

3 回答 3

6

您可以将 设置word spacing为容器的宽度。

div {
    width:200px;
    text-align:center;
    word-spacing: 200px;
}

jsFiddle 演示

  • PS - 实际上你也可以将它设置为一个非常大的值（32767pxonChrome 29.0.1和无限值 on FF23），它会以同样的方式工作。这样它就不会与容器的宽度耦合。
于 2013-09-14T17:18:19.063 回答
0

您可以只<p>对所有文本使用一个标签，然后使用<br>如下标签强制换行：

HTML

<p>My<br/><br/>
Shopping<br/><br/>
Cart</p>

工作小提琴

于 2013-09-14T17:21:38.083 回答
0

您可以使用行高的 br 标签和 css 属性来达到预期的效果

<style>
  .centerIt{
    line-height:1.3;/**choose as per your requirement**/
    text-align:center;       
    width:200px;
   }
</style>
<div class='centerIt'>My<br />Shopping<br />Cart</div>

http://jsfiddle.net/LkYrk/

于 2013-09-14T17:23:32.110 回答