How to set underline text for
tag but not
tag?

Question

how do i underline the <ul> but not <li>.

My css is

#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; }

But <li> css "text-decoration:none" is not working.

possible duplicate of [How do I get this CSS text-decoration override to work?](http://stackoverflow.com/questions/1823341/how-do-i-get-this-css-text-decoration-override-to-work) — Ryan, Sep 17 '13 at 16:55
"is not working." is not a suitable description of what is not working as expected. And it would be most helpful if you would describe what you want to achieve, because neither your CSS code, nor your question makes any sense. The only allowed children of an `ul` element are `li` elements. So setting a value for the `ul` and negate it for the `li` is somehow "useless". — Netsurfer, Sep 17 '13 at 17:23

score 1 · Accepted Answer · answered Sep 17 '13 at 17:15

1

Add display: inline-block to the li tag:

#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; }

See: http://jsfiddle.net/6e3WP/

You will need to update the text-alignment to ensure that you get the intended results.

answered Sep 17 '13 at 17:15

Ryan

26,884
9
56
83

The question is why one should add `text-decoration:underline;` to the UL when it is not wanted in the child LIs!? So the answer should be:"Delete `text-decoration:underline` from the rules!" – Netsurfer Sep 17 '13 at 17:34
well, actually i wanted to set heading with underline and the menu without underline and underline it only on hover.. i didn't want to use other tags for setting heading in UL. As i was working on it, it didn't work so i just wanted to know if i was doing something wrong.. well, i just used heading tag solve the problem.. The question was jus to know if i was doing something wrong in css.. Thanks all for the help. :) – Raju2047 Sep 20 '13 at 11:32

score 0 · Answer 2 · answered Sep 17 '13 at 16:48

You may try like this:-

#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; }

How to set underline text for tag but not tag?

2 Answers2

How to set underline text for
tag but not
tag?