当前位置: 动力学知识库 > 问答 > 编程问答 >

html - text-decoration: none not working on ul

问题描述:

I've seen a lot of questions relating to this subject but none of them answered my question. I am making a sidebar for a site and I'm trying to make the links in boxes that are the same width as the sidebar, have just a little padding, maybe 10-15px and a tiny bit of space between each. Maybe 3px. But I can't seem to get text-decoration: none; to work no matter what I've tried.

This is the most successful code I've gotten so far:

HTML

<div id= "sidebar">

<h3>Navigation Links</h3>

<div id= "sidelinks">

<ul>

<li><a href= "#">Home</a></li>

<li><a href= "#">Biography</a></li>

</ul>

</div>

</div>

CSS

#sidebar {

background: #464646;

width: 250px;

height: 1000px;

margin-left: 50px;

border-radius: 15px;

}

h3 {

font-family: 'Coda', cursive;

color: white;

background: #6B6B6B;

font-size: 24px;

text-align: center;

padding: 15px 0 8px 0;

border-top-left-radius: 15px;

border-top-right-radius: 15px;

}

#sidelinks {

font-family: 'Armata', sans-serif;

font-size: 25px;

text-decoration: none;

color: white;

background-color: #4D4D4D;

padding: 10px;

position: relative;

}

网友答案:

Removing the text-decoration and setting the colour is easy

#sidelinks a {
    color:black; 
    text-decoration:none;
}

So is removing the dots

#sidelinks ul {
    list-style:none;
    padding:0;
    margin:0;
}

If you look at the CSS you posted none of it was actually targeting <a> or <ul> so not sure why you were expecting other style than the default ones.

The fiddle doesn't have everything but it should send you in the right direction: http://jsfiddle.net/eNUpJ/

网友答案:

add it reset css , I think you have to learn about css reset http://meyerweb.com/eric/tools/css/reset/

a {text-decoration: none;}

or

#sidelinks a {text-decoration: none;}
分享给朋友:
您可能感兴趣的文章:
随机阅读: