<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
<ul style="list-style: none;"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
ul.no-bullets {
list-style-type: none;
margin: 0;
padding: 0;
}
<ul style="list-style-type:square;"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
<ol type="I"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
The <dl> tag defines the description list, the <dt> tag defines the term (name/Coffee+Milk), and the <dd> tag describes each term:
<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
Kan også kun bruke DT, i DL.
<dl> <dt>Firefox</dt> <dt>Mozilla Firefox</dt> <dt>Fx</dt> </dl>
Eller blande DT og DD, i DL.
<dl>
<dt>Firefox</dt>
<dt>Mozilla Firefox</dt>
<dt>Fx</dt>
<dd>
A free, open source, cross-platform,
graphical web browser developed by the
Mozilla Corporation and hundreds of
volunteers.
</dd>
</dl>
Lists can be nested (list inside list):
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
| Property | Value | Explanation |
|---|---|---|
| margin | length, %, or auto | the top, right, bottom, and left margins |
| padding | length, %, or auto | the top, right, bottom, and left paddings |
ul {
border:2px solid green;
}
ul {
margin: 0;
border:2px solid green;
}
ul {
margin: 1em 0 0 0;
border:2px solid green;
}
ul {
margin: 0 1em 0 0;
border:2px solid green;
}
ul {
margin: 0 0 1em 0;
border:2px solid green;
}
ul {
margin: 0 0 0 1em;
border:2px solid green;
}
ul {
background-color:orange;
margin: 5px 20px 40px 70px;
border:2px solid green;
}
li {
background-color:yellow;
}
ul {
background-color:orange;
margin: 5px 20px 40px 70px;
padding: 0;
border:2px solid green;
}
li {
background-color:yellow;
}
ul {
background-color:orange;
margin: 5px 20px 40px 70px;
padding-top: 15px;
border:2px solid green;
}
li {
background-color:yellow;
}
ul {
background-color:orange;
margin: 5px 20px 40px 70px;
padding-right: 33%;
border:2px solid green;
}
li {
background-color:yellow;
}
ul {
background-color:orange;
margin: 5px 20px 40px 70px;
padding-bottom: 15px;
border:2px solid green;
}
li {
background-color:yellow;
}
ul {
background-color:orange;
margin: 5px 20px 40px 70px;
padding-left: 15px;
border:2px solid green;
}
li {
background-color:yellow;
}
ul {
background-color:orange;
border:2px solid green;
}
li {
background-color:yellow;
margin: 15px;
padding: 14px 16px;
border:1px dashed #555;
}
Fra: (w3schools.com) Styling Lists With Colors:
ul {
background: #3399ff;
padding: 20px;
}
ul li {
background: #cce5ff;
margin: 5px;
}
ol {
background: #ff9999;
padding: 20px;
}
ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul {
margin: 30px;
border:2px solid green;
}
li {
background-color:yellow;
padding: 14px 16px;
border:1px dashed #555;
}
ul {
margin: 30px;
border:2px solid green;
}
li {
background-color:yellow;
padding: 14px 0;
border:1px dashed #555;
}
ul {
margin: 30px;
border:2px solid green;
}
li {
background-color:yellow;
padding: 0 16px;
border:1px dashed #555;
}
PB: Hentet fra en norsk side, uten HTML (lagt til av meg):
<ul>
<li>Coffee</li>
<li>Tea
<ol>
<li>Green</li>
<li>Black</li>
</ol>
</li>
<li>Coca Cola</li>
</ul>
.....Så lager du en ny CSS-regel for ul-elementet. Dette fjerner kulepunktene i listen.
ul {
list-style: none;
}
Så lager du en ny CSS-regel for li-elementet.
ul > li {
padding: .3rem 0 .3rem 1rem;
}
Ved å skrive ul > li lager du en regel som kun gjelder for li-elementene som er direkte under ul-elementet.
Du kan droppe å skrive > tegnet men da påvirker du alle li-elementene som er under det ytterste ul-elementet
og hvis du har flere nivåer med li-elementer er det ikke sikkert at det er det du ønsker.
Skriv inn følgende kode på bunnen av CSS-filen din.
ul {
list-style: none;
}
ul > li {
padding: .3rem 0 .3rem 1rem;
}
ul.demo1 {
list-style-position: outside;
}
<h3>Outside</h3> <ul class="demo1"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
ul.demo2 {
list-style-position: inside;
}
<h3>Inside</h3> <ul class="demo2"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
ul {
list-style-image:
url(bilder/42x42-stjerne.jpg);
}
ul {
list-style: none; /* Remove HTML bullets */
padding: 0;
margin: 0;
}
li {
padding-left: 16px;
}
li::before {
content: "•"; /* Insert content that looks like bullets */
padding-right: 8px;
color: blue; /* Or a color you prefer */
}
<ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul>
PB: Simulert presentasjon:
PB: Modifisert. Har ikke brukt ekstern særegen font.
#newlist ul {
list-style: none;
}
#newlist ul li:before {
content: "\2713";
color:green;
padding-right:5px;
}
#newlist .othercheck:before {
font-weight: 900;
content: "\2606";
color:red;
padding-right:5px;
<div id="newlist"> <ul> <li>This will be the final product</li> <li>Using only CSS</li> <li class="othercheck">We can make the bullet whatever we want</li> </ul> </div>
PB: Simulert presentasjon:
Det beste er egentlig å lage en CLASS av den, men det går an å legge det inn på lokal HTML. Blir ofte mye mer kode med info lagt inn på hvert element.
ul {
width: 150px;
background: #292929;
color: white;
list-style: none;
padding-left: 0;
}
li {
padding: 10px;
border-bottom: 2px solid black;
border-top: 2px solid #3c3c3c;
}
li:first-child {
border-top: none;
}
li:last-child {
border-bottom: none;
}
<ul style="width: 150px; background: #292929; color: white; list-style: none; padding-left: 0;"> <li style="padding: 10px; border-bottom: 2px solid black; border-top: none;"> List Item </li> <li style="padding: 10px; border-bottom: 2px solid black; border-top: 2px solid #3c3c3c;"> List Item </li> <li style="padding: 10px; border-bottom: none; border-top: 2px solid #3c3c3c;"> List Item </li> </ul>
* {
box-sizing: border-box;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
ul li {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
}
<ul> <li>Adele</li> <li>Agnes</li> <li>Billy</li> <li>Bob</li> <li>Calvin</li> <li>Christina</li> <li>Cindy</li> </ul>
Styling av UL, med ramme (kantlinje) kun på v.s.
ul {
border-left: 5px solid red;
background-color: #f1f1f1;
list-style-type: none;
padding: 10px 20px;
}
En stylet UL-liste med stylet LI borders
Selve UL har egen ramme (kantlinje), som kan styles.
Hver LI har egen ramme (kantlinje), som kan styles.
Siste LI bør ikke ha ramme (kantlinje) for å unngå dobbel ramme (kantlinje), både fra UL + LI.
Rammene (Kantlinjene) har opprinnelig 1px, satte den opp for å se effekten bedre.
ul {
list-style-type: none;
padding: 0;
border: 2px solid #ddd;
}
ul li {
padding: 8px 16px;
border-bottom: 2px solid #ddd;
}
ul li:last-child {
border-bottom: none
}
li {
display: inline;
margin-right: 20px;
}
<ul> <li>First</li> <li>Second</li> <li>Third</li> </ul>
ul {
padding: 0;
margin: 0;
list-style-type: none;
}
li {
float: left;
width: 150px;
margin-right: 5px;
padding: 2px;
border: 1px #ffb366 solid;
background-color: #fffdee;
text-align: center;
}
<ul> <li>First</li> <li>Second</li> <li>Third</li> </ul> <p style="clear: left;">--- Clears the left float ---</p>
--- Clears the left float ---
ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}
ol.d {list-style-type: armenian;}
ol.e {list-style-type: cjk-ideographic;}
ol.f {list-style-type: decimal;}
ol.g {list-style-type: decimal-leading-zero;}
ol.h {list-style-type: georgian;}
ol.i {list-style-type: hebrew;}
ol.j {list-style-type: hiragana;}
ol.k {list-style-type: hiragana-iroha;}
ol.l {list-style-type: katakana;}
ol.m {list-style-type: katakana-iroha;}
ol.n {list-style-type: lower-alpha;}
ol.o {list-style-type: lower-greek;}
ol.p {list-style-type: lower-latin;}
ol.q {list-style-type: lower-roman;}
ol.r {list-style-type: upper-alpha;}
ol.s {list-style-type: upper-latin;}
ol.t {list-style-type: upper-roman;}
ol.u {list-style-type: none;}
ol.v {list-style-type: inherit;}
UL <ul class="a">... <ul class="b">... <ul class="c">... OL <ol class="d">... <ol class="e">... <ol class="f">... <ol class="g">... <ol class="h">... <ol class="i">... <ol class="j">... <ol class="k">... <ol class="l">... <ol class="m">... <ol class="n">... <ol class="o">... <ol class="p">... <ol class="q">... <ol class="r">... <ol class="s">... <ol class="t">... <ol class="u">... <ol class="v">...
li {
width: 200px;
min-height: 250px;
border: 1px solid #000;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
margin: 5px;
zoom: 1;
*display: inline;
_height: 250px;
}
<ul style="list-style-type:square;"> <li>India</li> <li>UK</li> <li>US</li> </ul>
PB: Dette kan ligne et layout med bruk av Flexbox (display: flex;) (flex-direction: row;) etc. Det virkelig artige med denne er at en får helt like kolonner/rammer (kantlinjer), liggende etter hverandre akkurat som en table, i tillegg til at de flytter seg under hverandre ved resizing av nettlserevinduet!
PB: Kan egentlig også gjøre dette med DIVs
/* General styles */
html {
font-family: Helvetica, Arial, sans-serif;
font-size: 10px;
}
h2 {
font-size: 2rem;
}
ul,ol,dl,p {
font-size: 1.5rem;
}
li, p {
line-height: 1.5;
}
/* Description list styles */
dd, dt {
line-height: 1.5;
}
dt {
font-weight: bold;
}
PB: Modifisert. REM-størrelsene fungerte ikke inn under en DIV, for å simulere en generell stilsetting.
Gjorde om til EM, slik at font-size-verdien på HTML kan editeres og virke inn på oppsettet som tiltenkt.
Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.
Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.
Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.
The list-style-type:none property can also be used to remove the markers/bullets. Note that the list also has default margin and padding. To remove this, add margin:0 and padding:0 to <ul> or <ol>:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
The list-style property is a shorthand property. It is used to set all the list properties in one declaration:
ul {
list-style: square inside url("sqpurple.gif");
}
When using the shorthand property, the order of the property values are:
If one of the property values above are missing, the default value for the missing property will be inserted, if any.
The ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the list.
The ol element represents a list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the list.
Represents a description list consisting of zero or more name-value groups. Each group must consist of one or more names (dt elements) each followed by one or more values (dd elements).
Name-value groups may be terms and definitions, metadata topics and values, or any other groups of name-value data. The values within a group are alternatives; multiple paragraphs forming part of the same value must all be given within the same dd element.
The li element represents a list item. If its parent element is an ol, ul, or menu element, then the element is an item of the parent element's list, as defined for those elements. Otherwise, the list item has no defined list-related relationship to any other li element.
The dt element represents the term, or name, part of a term-description group in a description list (dl element).
Lister skiller seg litt fra de elementene vi har sett på hittil ved at de krever to elementer for å fungere. Grunnen til det er at du først må bestemme om du skal ha en punktvis liste eller en nummerert liste. Derfor skriver du først starttagen til listen så starttagen til listepunktet så sluttagen til listepunktet og så eventuelt flere listepunkter og til slutt avslutter du med sluttagen på selve listen.
Det er også mulig og ha lister inne i lister, såkalte nested lists. Hvis det skal gjøres på riktig måte, etter anbefalningene fra W3C så skal den nye listen ligge inn i li-elementet og ikke etter sluttagen til li-elementet.