css - 如何为 <ul> 标签而不是 <li> 标签设置下划线文本？

Question

如何在 <ul> 下划线但不是 <li> .

我的CSS是

#rightcol { width:170px; min-height:350px; float:right; 
         background:#fff; border:1px solid #666; border-radius:5px; }

#rightcol > ul { list-style:none; line-height:2em; padding-left:0; 
        font-weight:bold; text-decoration:underline; text-align:center; }

#rightcol > ul > li { padding-left:20px; font-weight:normal; 
        font-size:12px; text-decoration:none; text-align:left; }

但是<li> CSS "text-decoration:none"不工作。

Answer 1

在li标签中添加display: inline-block:

#rightcol { width:170px; min-height:350px; float:right; 
         background:#fff; border:1px solid #666; border-radius:5px; }

#rightcol > ul { list-style:none; line-height:2em; padding-left:0; 
        font-weight:bold; text-decoration:underline; text-align:center; }

#rightcol > ul > li { display:inline-block;
        padding-left:20px; font-weight:normal; 
        font-size:12px; text-decoration:none; text-align:left; }

参见:http://jsfiddle.net/6e3WP/

您将需要更新 text-alignment 以确保获得预期的结果。