Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
327 views
in Technique[技术] by (71.8m points)

html - CSS code works if put in style="", fails if put in external css file

I have some html in this format:

<ul id="foo">
    <li class="bar"><a href="#">Reports</a>
      <span>
        <a href="#" class="fooLink">First Report</a>
        <a href="#" class="fooLink">Second Report</a>
     </span>
  </li>
</ul>

Essentially, I want the 'reports' link in the menu to expand when clicked, and display the links below it, padded to the side, so it looks like this:

Reports
   First report
   Second report

This is my css code:

.fooLink
{
    padding-left: 20%; 
    padding-top: 0px;
    display:block;
}

However this doesn't work. If I examine the links in firebug, I see that the display:block; line is blocked. However if I do this:

<a href="#" 
   style="padding-left:20%; padding-top:0px; display:block;">Second Report</a>

Then it works as I want it. Why doesn't it work if i put it in the css class?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

check your other CSS declarations for conflicting styles, paying close attention to Specificity. Firebug should give you what CSS is actually applied, and where it's coming from.

http://jsfiddle.net/PEbRQ/

seems to work (though its an embedded CSS block, not an external file.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...