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

将display: inline-block添加到li代码：

#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以确保获得预期的结果。

Answer 2

您可以尝试这样： -

#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 !important; text-align:left; }

如何设置<ul>标签的下划线文本但不是<li>标签？</li> </ul>

2 个答案: