I have an unordered list with bullets, but the first li I want without a bullet
I can't figure out how I can just one item without a bullet
<ul>
<li class="no_bullet"> item 0 </li>
<li>item 1 </li>
<li>item 2 </li>
<li>item 3 </li>
</ul>
you can do like this:
using first-child/first-of-type, no need for extra markup (using class)
li:first-child {
list-style: none
}
<ul>
<li>item 0 </li>
<li>item 1 </li>
<li>item 2 </li>
<li>item 3 </li>
</ul>
if you need to remove the bullet from just this specific list, then set a class to ul and do it like this:
.list-no-bullet li:first-child {
list-style: none
}
<ul class="list-no-bullet">
<li>item 0 </li>
<li>item 1 </li>
<li>item 2 </li>
<li>item 3 </li>
</ul>
You can do this with the list-style property
li:first-child {
list-style: none;
}
<ul>
<li>item 0</li>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
You can also replace first-child with nth-child(index), if you want to select a specific item that isn't first or last, e.g.
li:nth-child(3) {
list-style: none;
}
To remove a bullet you would use list-style: none. There are a number of other valid styles you could also use including roman numerals, images and positioning of the bullet: MDN
.no_bullet {
list-style: none;
}
<ul>
<li class="no_bullet"> item 0 </li>
<li>item 1 </li>
<li>item 2 </li>
<li>item 3 </li>
</ul>
Related
looking for some code to wrap a li items in a div with a set height.
When list items dont fit the height it will spill over to the right.
also looking to align them to the left of that div with bullet point still visible.
would also be nice if you would be able to control the "space" in between so it doesn't look squished.
I wrote the code how i would like it displayed knowing it wont. hopefully it helps to explain what i am after.
<div>
<ul>
<li> 1</li> (space) <li> 4</li> (space) <li> 7</li>
<li> 2</li> (space) <li> 5</li> (space) <li> 8</li>
<li> 3</li> (space) <li> 6</li> (space) <li> 9</li>
</ul>
</div>
You can use column-count for this. Check snippet below..
for detail you can take reference from https://www.w3schools.com/css/css3_multiple_columns.asp
ul {
list-style: none;
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
}
ul li {
display: block;
padding: 10px 0;
}
<ul>
<li> 1</li>
<li> 2</li>
<li> 3</li>
<li> 4</li>
<li> 5</li>
<li> 6</li>
<li> 7</li>
<li> 8</li>
<li> 9</li>
</ul>
Really simple guys: making a collapsible list in html and css and trying to move the checkbox that controls the drop down to the FRONT of the text, as well as get rid of the dot to list the items. Right now the checkbox is placed at the end of the text. I tried to simply switch the order of the html but that screws up the drop down action.
Here is the fiddle: https://jsfiddle.net/gyetxsLu/
HTML:
<div class="CHECKBOXMENU">
<ul class="collapsibleList">
<li>
<label for="mylist-node1">Click to open list 1</label>
<input type="checkbox" id="mylist-node1" />
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>
<label for="mylist-node2">Click to open list 2 with subfolders</label>
<input type="checkbox" id="mylist-node2" />
<ul>
<li>
<label for="mylist-node3">Click to expand</label>
<input type="checkbox" id="mylist-node3" />
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
</div>
CSS:
.collapsibleList li > input + * {
display: none;
}
.collapsibleList li > input:checked + * {
display: block;
}
.collapsibleList label {
cursor: pointer;
}
No need to restructure the HTML. float: left the required checkboxes and remove the bullets using list-style-type: none
ul.collapsibleList,
ul.collapsibleList ul {
list-style-type: none;
}
#mylist-node1,
#mylist-node2,
#mylist-node3 {
float: left;
margin-right: 5px;
}
JSfiddle
i need to create UL list in html 4X2
something like this
item1 | item2 | item3 | item 4
item5 | item6 | item 7| item 8
Is that possible to do with ul list?
I know how to create klasic licst.. like
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
You can use the float CSS property to achieve this.
A JSFiddle demo.
li {
float: left;
width: 25%;
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
</ul>
Just show li element inline and make two separate lists:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<ul>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
And the CSS:
li { display:inline; }
If you want more control, you can put inline-block and set width, margin, etc.
JS Demo
Like this
demo
css
ul{
margin:0;
padding:0;
}
li{
display:inline-block;
border:1px solid black;
margin:5px;
}
You can add max-width to UL to width that is not more than four ite
I basically have a menu like it shown below in the HTML code, and I want to add "|" before each "li" within the menu to give it the look of (Home | About | Contact). Everything is working, however, I am having a problem of deleting the "|" from the very first "li" in each "ul" within the menu.
So at the moment my menu is shown like: ( | Home | About | Contact), how do I get rid of the "|" that is on the first "li" element?
currnt CSS:
#mainMenu li:before{
content: "|";
color: blue;
}
I have tried to give it a class of "first" and then use li.first {contnet:none} but no hope.
<nav><ul id="mainMenu"><!--Main Menu-->
<li class="first">Home
<ul>
<li>Intro 1</li>
<li>Intro 2</li>
<li>Intro 3</li>
<li>Vision</li>
<li>Contacts</li>
<li>Staff</li>
<li>Use</li>
<li>Crisis</li>
</ul></li>
<li>Basics
<ul>
<li>Definition 1</li>
<li>Definition 2</li>
<li>Definition 3</li>
<li>Assess 1</li>
<li>Assess 2</li>
<li>Assess 3</li>
</ul></li>
<li>Need
<ul>
<li>World 1</li>
<li>World 2</li>
<li>World 3</li>
<li>Polar 1</li>
<li>Polar 2</li>
<li>Polar 3</li>
<li>National 1</li>
<li>National 2</li>
<li>National 3</li>
<li>Alaska 1</li>
<li>Alaska 2</li>
<li>Alaska 3</li>
<li>Alaska 4</li>
<li>Fairbanks</li>
</ul></li>
<li>Models
<ul>
<li>Durkheim</li>
<li>Joiner</li>
<li>NAMI</li>
<li>Mental</li>
<li>Church</li>
<li>Menninger</li>
<li>Weaver/Wright</li>
</ul></li>
<li>Approach
<ul>
<li>Trees 1</li>
<li>Tress 2</li>
<li>Goals 1</li>
<li>Goals 2</li>
<li>Training 1</li>
<li>Training 2</li>
<li>Gas 1</li>
<li>Gas 2</li>
<li>Boat 1</li>
<li>Boat 2</li>
</ul></li>
<li>Library
<ul>
<li>Stories</li>
<li>Books</li>
<li>Plays</li>
<li>Epics</li>
<li>Movies</li>
<li>Articles</li>
</ul></li>
<li>Web
<ul>
<li>Arctic</li>
<li>National</li>
<li>Supports</li>
<li>Reference</li>
</ul></li>
</ul></nav>
Change your css to this: (using sibling selector)
#mainMenu ul li ~ li:before {
content: "|";
}
The above style will be applied to the elements which have previous sibling elements (li ~ li). Hence this styling will not be applied to the first li element because it doesn't have any previous sibling elements.
How about:
#mainMenu ul li:first-child:before{
content: '';
}
You can exclude the first element using :not pseduo selector.
#mainMenu li:not(:first-child):before {
content: "|";
color: blue;
}
Js Fiddle Demo
#mainMenu li.first:before{
content: none;
}
I think this should work.
I have a menu element like:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>SubItem 1</li>
<li>SubItem 2</li>
<li>SubItem 3</li>
</ul>
</li>
<li>Item 4</li>
</ul>
The element is positioned absolutely. How can I center it without knowing its width (number of parent elements might change).
Regards,
Dave
I think what you're after is possible if you have a parent element to the ul:
<div class="example">
<ul>
<!-- lots of li's -->
</ul>
</div>
Then use the old school text-align trick that was used to center layouts:
.example {
text-align: center;
}
.example ul {
text-align: left;
display: inline-block;
}
See: http://jsfiddle.net/chippper/WK5Z4/