如何在电子标签中下移一些文字？

Question

我想从上边的框中移到20 box里的文字。如何使用css或css3来实现？

http://jsfiddle.net/4pyxM/

我可以使用padding-top: 20px;，但是我想知道另一种不用修改html的方法。

  <ul id="mylist">
    <li>apple</li>
    <li>banana</li>
    <li>kiwi</li>
</ul>



  #mylist ul {
        position:absolute;
        float:left;
        list-style-type:none;
        margin: 0px;
        padding: 0px;
    }

    #mylist li {
        float:left;
        list-style-type:none;
        margin: 0px;
        padding: 0px; // here could be 20px
        width:80px;
        height:80px;
        border:1px solid red;
    }

Answer 1

你只是在找这个吗？

#mylist li{ 
    padding-top:20px;
}

更新后的编辑

样式应该在一个独立的CSS文件中，而不是HTML文档。这样，您就可以对样式进行更改，而不必编辑HTML。

Answer 2

添加padding-top:10px并将10 on的高度降低到您的li：http://jsfiddle.net/4pyxM/2/上

#mylist li {
    float:left;
    list-style-type:none;
    margin: 0px;
    padding: 0px;
    padding-top:10px;
    width:80px;
    height:70px;
    border:1px solid red;
}

编辑：如果您想要另一种方式而不是改变填充，您可以修改线的高度，例如line-height:30px。(内容将以线的高度为中心)。

Answer 3

将padding: 0px选项器下的#myslist li行更改为：

padding:10px 0 0 0;

JSFiddle：http://jsfiddle.net/eNemZ/1/