如何在li标签中移动一些文本？

Question

我想从顶边框向下移动20px里面的文字。如何使用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;
}

更新后修改

您的样式应位于HTML文档的单独CSS文件中。这样您就可以更改样式而无需编辑HTML。

Answer 2

添加padding-top:10px并降低您{10}的高度[{1}}：http://jsfiddle.net/4pyxM/2/

li

编辑：如果您希望采用其他方式而不是更改填充，则可以修改行高，例如#mylist li { float:left; list-style-type:none; margin: 0px; padding: 0px; padding-top:10px; width:80px; height:70px; border:1px solid red; } 。 （内容将以行的高度为中心。）

Answer 3

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

padding:10px 0 0 0;

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

Answer 4

你可以使用padding-top。我改变了你的代码
这是fiddle

 padding: 10px 0 0 0; 
 or
 padding-top: 10px;

更新后
您只需更改您的CSS，它不需要更改HTML

Answer 5

在#mylist li change

中

padding: 0px;

要

padding-top: 10px;