html - 如何在 li 标签中下移一些文本？

Question

我想从顶部边缘框向下移动 20px 的 li 内的文本。如何用 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: 0px将选择器下的行更改#myslist li为：

padding:10px 0 0 0;

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

Answer 3

您可以为此使用 padding-top。我改变了你的代码
这里是小提琴

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

更新后您
只需稍微更改您的 css 它不需要更改 HTML

Answer 4

在#mylist 里改变

padding: 0px;

至

padding-top: 10px;

Answer 5

在你身上添加padding-top:10px和减少 10px 的高度：http li: //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. （内容将以行高居中）。