سؤال

Is this reset style-sheet correct? The problem I am having is with the oi and ul.

As you can see, below where there is

 ol li, ul li {
    margin: 5px 0 0 40px;
   }

I only want to apply it for Lists within the page, it worked, however It applys the style to the Nav list as well! which is in the header, how can I prevent that from happening?

html, body, div, section, article, span, figure, figcaption, img, 
h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, abbr, address, 
small, strong, sub, sup, input, output, textarea, ol, ul, li, fieldset, 
form, label, legend, tr, th, td, table, caption, footer, header, 
hgroup, aside, menu, nav, time, mark, audio, video, 
canvas, embed, iframe, object {

    margin: 0;
    padding: 0;
    border: none;
    font: inherit;
    max-width: 100%;
    text-decoration: none;
    box-sizing: border-box;
    -moz-box-sizing: border-box;    
    -webkit-box-sizing: border-box;
}

a {
    display: inline-block;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

ol li, ul li {
    margin: 5px 0 0 40px;
}

abbr {
    font-weight: bold;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.hidden {
    display: none;
}
هل كانت مفيدة؟

المحلول

If there are li elements in your nav you have to reset them again or (a better way) you should specify which li elements should have these margins. so use a class for them instead.

 ol li.margined, ul li.margined {
    margin: 5px 0 0 40px;
 }

or the first option

ol li, ul li {
    margin: 5px 0 0 40px;
}
nav ol li, nav ul li {
    margin: 0;
}

نصائح أخرى

Just create a more specific class to override it, e.g.

ul.yourNavClass li {
   margin: 0px 5px;
}

That's assuming the class is on the ul element, since I can't see your code. If it's not, just change it to whatever way it is layed out, .yourNavClass ul li, or nav ul li etc.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top