I have created an unordered list. I feel the bullets in the unordered list are bothersome, so I want to remove them.
Is it possible to have a list without bullets?
You can remove bullets by setting the list-style-type to none on the CSS for the parent element (typically a <ul>), for example:
ul {
list-style-type: none;
}
You might also want to add padding: 0 and margin: 0 to that if you want to remove indentation as well.
See Listutorial for a great walkthrough of list formatting techniques.
If you're using Bootstrap, it has an "unstyled" class:
Remove the default list-style and left padding on list items (immediate children only).
Bootstrap 2:
<ul class="unstyled">
<li>...</li>
</ul>
http://twitter.github.io/bootstrap/base-css.html#typography
Bootstrap 3 and 4:
<ul class="list-unstyled">
<li>...</li>
</ul>
Bootstrap 3: http://getbootstrap.com/css/#type-lists
Bootstrap 4: https://getbootstrap.com/docs/4.3/content/typography/#unstyled
Bootstrap 5: https://getbootstrap.com/docs/5.0/content/typography/#unstyled
You need to use list-style: none;
<ul style="list-style: none;">
<li>...</li>
</ul>
Small refinement to the previous answers: To make longer lines more readable if they spill over to additional screen lines:
ul, li {list-style-type: none;}
li {padding-left: 2em; text-indent: -2em;}
If you're unable to make it work at the <ul> level, you might need to place the list-style-type: none; at the <li> level:
<ul>
<li style="list-style-type: none;">Item 1</li>
<li style="list-style-type: none;">Item 2</li>
</ul>
You can create a CSS class to avoid this repetition:
<style>
ul.no-bullets li
{
list-style-type: none;
}
</style>
<ul class="no-bullets">
<li>Item 1</li>
<li>Item 2</li>
</ul>
When necessary, use !important:
<style>
ul.no-bullets li
{
list-style-type: none !important;
}
</style>
I used list-style on both the ul and the li to remove the bullets. I wanted to replace the bullets with a custom character, in this case a 'dash'. That gives a nicely indented effect that works fine when the text wraps.
ul.dashed-list {
list-style: none outside none;
}
ul.dashed-list li:before {
content: "\2014";
float: left;
margin: 0 0 0 -27px;
padding: 0;
}
ul.dashed-list li {
list-style-type: none;
}
<ul class="dashed-list">
<li>text</li>
<li>text</li>
</ul>
If you wanted to accomplish this with pure HTML alone, this solution will work across all major browsers:
Description Lists
Simply using the following HTML:
<dl>
<dt>List Item 1</dt>
<dd>Sub-Item 1.1</dd>
<dt>List Item 2</dt>
<dd>Sub-Item 2.1</dd>
<dd>Sub-Item 2.2</dd>
<dd>Sub-Item 2.3</dd>
<dt>List Item 3</dt>
<dd>Sub-Item 3.1</dd>
</dl>
Example here: https://jsfiddle.net/zumcmvma/2/
Reference here: https://www.w3schools.com/tags/tag_dl.asp
This orders a list vertically without bullet points. In just one line!
li {
display: block;
}
To completely remove the ul default style:
list-style-type: none;
margin: 0;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 0;
If you are developing an existing theme, it's possible that the theme has a custom list style.
So if you cant't change the list style using list-style: none; in ul or li tags, first check with !important, because maybe some other line of style is overwriting your style. If !important fixed it, you should find a more specific selector and clear out the !important.
li {
list-style: none !important;
}
If it's not the case, then check the li:before. If it contains the content, then do:
li:before {
display: none;
}
You can hide them using ::marker pseudo-element.
Transparent ::marker
ul li::marker {
color: transparent;
}
ul li::marker {
color: transparent;
}
ul {
padding-inline-start: 10px; /* Just to reset the browser initial padding */
}
<ul>
<li> Bullets are bothersome </li>
<li> I want to remove them. </li>
<li> Hey! ::marker to the rescue </li>
</ul>
::marker empty content
ul li::marker {
content: "";
}
ul li::marker {
content: "";
}
<ul>
<li> Bullets are bothersome </li>
<li> I want to remove them </li>
<li> Hey! ::marker to the rescue </li>
</ul>
It is better when you need to remove bullets from a specific list item.
ul li:nth-child(n)::marker { /* Replace n with the list item's position*/
content: "";
}
ul li:not(:nth-child(2))::marker {
content: "";
}
<ul>
<li> Bullets are bothersome </li>
<li> But I can live with it using ::marker </li>
<li> Not again though </li>
</ul>
In BOOTSTRAP You can remove bullets by setting the list-unstyled class on the parent class of the li tag.
<ul className="list-unstyled">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
ul{list-style-type:none;}
Just set the style of unordered list is none.
I tried and observed:
header ul {
margin: 0;
padding: 0;
}
<div class="custom-control custom-checkbox left">
<ul class="list-unstyled">
<li>
<label class="btn btn-secondary text-left" style="width:100%;text-align:left;padding:2px;">
<input type="checkbox" style="zoom:1.7;vertical-align:bottom;" asp-for="#Model[i].IsChecked" class="custom-control-input" /> #Model[i].Title
</label>
</li>
</ul>
</div>
In case you want to keep things simple without resorting to CSS, I just put a in my code lines. I.e., <table></table>.
Yeah, it leaves a few spaces, but that's not a bad thing.
Related
When writing html/doxygen, ul, li are frequently used. For a nested list. I want to the first layer to be "disc", the second layer to be "square", and the thrid layer to be "dash".
<ul>
<li> ...
<ul type=square>
<li> ...
<ul class="dash">
<li> ...
<li> ...
</ul>
</ul>
</ul>
Is there way to avoid typing things like type=square or class="dash". Once I write a nested ul list, it can be default be set to different type and class depending on what the nested layer it is located?
Anyway to do it in CSS?
You can use CSS in this manner:
ul {
list-style: disc
}
ul ul {
list-style: circle;
}
ul ul ul {
list-style: square;
}
Demo:http://jsfiddle.net/GCu2D/1736/
square is a valid list-type, below is an example. You can use :before pseudo selector to achieve dash.
ul[type=square] {
list-style: square;
}
ul.dash {
list-style: none;
}
ul.dash >li:before {
content:"-";
position: absolute;
margin-left: -14px
}
<ul>
<li> ...
<ul type=square>
<li> ...
<ul class="dash">
<li> ...
<li> ...
</ul>
</ul>
</ul>
The questions below pertain to sample HTML / CSS code below:
ul {
display: inline-block;
list-style: none;
}
li {
color: #000;
}
<ul>
<li>Home</li>
<li>Portfolio</li>
</ul>
When choosing to format and style a navigation menu that was created using an unordered list, what is the difference of using ul selector to target the lists versus targeting the li selector directly?
Is there an appropriate time when I should only use ul selector instead of li, and vice versa? In other words, are there properties that only work on the ul level. And on the li level?
First of all, there are things you simply cannot do selecting ul (I mean with pure CSS solutions, omitting preprocessors):
li { color: blue; }
li:first-child, li:last-child { color: red }
and so on with :pseudo-classes.
Main point in selecting whole container and targeting nested elements is just much less writing. Compare:
<ul>
<li class="my-superior-class-name"
<li class="my-superior-class-name">A</li>
<li class="my-superior-class-name">A</li>
<li class="my-superior-class-name">A</li>
<li class="my-superior-class-name">A</li>
<li class="my-superior-class-name">A</li>
<li class="my-superior-class-name">A</li>
<li class="my-superior-class-name">A</li>
</ul>
with:
<ul class="my-superior-class-name">
<li>A</li>
<li>A</li>
<li>A</li>
<li>A</li>
<li>A</li>
<li>A</li>
<li>A</li>
</ul>
Main difference in targeting ul and li with your CSS styles is that targeting deeper nested elements has bigger priority.
Unorderd list's default styles are:
ul {
list-style-type: disc;
list-style-position: inside;
}
So this are kind of properties which work only on ul lvl. But consider situation, when you set padding on the ul: Does every single ul child gets the same padding? There comes inheritance.
Overall, one advice: just don't overcomplicate it and use what you feel is simplest to understand and come back to for you.
Not every property is inherited implicitly, in fact in OP's code there's proof. The property display:inline-block is applied to <ul> yet the <li> will not inherit the display:inline-block from <ul> unless it does so explicitly by using display:inherit on the <li> (Might as well use display: inline-block on the <li> anyways since both options take the same effort to write.)
There are circumstances in which it would behoove us to target a <ul> over it's <li> such as the properties that are inherited implicitly: font-size, color, visibility etc.
SNIPPET
ul {
display: inline-block;
list-style: none;
}
li {
color: #000;
}
ul:last-of-type {
display: block;
}
ul:last-of-type li {
display: inline-block;
}
<h5><mark><code>ul { display:inline-block; }</code></mark></h5>
<ul>
<li>Home</li>
<li>Portfolio</li>
</ul>
<h5><mark><code>li { display:inline-block; }</code></mark></h5>
<ul>
<li>Home</li>
<li>Portfolio</li>
</ul>
I am trying to make a horizontal drop down menu in CSS. However, it appears vertically:
I want the two topmost menu items to be horizontal. What can I do, besides making a table with one row?
ul ul {
display: none;
}
ul li:hover > ul {
display: block;
}
<ul>
<li>
abc
<ul>
<li>abc</li>
<li>abc</li>
</ul>
</li>
<li>
abc
<ul>
<li>abc</li>
<li>abc</li>
</ul>
</li>
</ul>
You can try floating the list items:
.root {
overflow: hidden; /* clear float */
}
.root > li {
float: left;
}
<ul class="root">
<li>
abc
<ul>
<li>abc</li>
<li>abc</li>
</ul>
</li>
<li>
abc
<ul>
<li>abc</li>
<li>abc</li>
</ul>
</li>
</ul>
You can add submenu a class/id with
.inline-menu{
display: inline;
}
http://jsfiddle.net/dyaskur/fby9fan6/
The gist of your question is actually this: what is the difference between inline and block elements? This is a fundamental question that is important to understanding the basics of layout in CSS/HTML. There is a good write-up on this topic and some of the trade-offs of the various approaches at:
http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
Basically, <li> is block-level tag, meaning that it displays as its own "block" element: receives a layout (settable dimensions), by default takes the entire width of the parent element, and has a forced break after the rendered element (is on a line to itself).
So, that leaves us with a number of approaches for having your menu items sit side-by-side:
Use inline-level elements for your menu items
Use block-level elements and float them
Use block-level elements and style them as inline-block
All of these approaches are detailed in the above link. Personally, I prefer to use floated block elements. I have a fiddle with some rough css to give you an idea. Note that there are some considerations in how to display your submenus as well. You'll note that I've implemented these as having display: block, with no float, because we want them to stack vertically.
HTML
<ul class="menu">
<li>
foo
<ul class="submenu">
<li>subfoo1</li>
<li>subfoo2</li>
</ul>
</li>
<li>
bar
<ul class="submenu">
<li>subbar1</li>
<li>subbar2</li>
</ul>
</li>
</ul>
CSS
ul.menu {
list-style: none;
}
ul.menu > li{
float: left;
position: relative;
}
ul.menu li {
background-color: #cccccc;
padding: 5px 20px;
}
ul.menu > li + li {
border-left: solid black 2px;
}
ul.menu li:hover > ul {
display: block;
}
ul.menu li a,ul.menu li a:link, ul.menu li a:hover, ul.menu li a:visited {
color: black;
text-decoration: none;
}
ul.submenu{
display: none;
list-style: none;
position:absolute;
left: 0;
padding: 0;
}
ul.submenu li {
float:none;
display: block;
}
ul.submenu > li + li {
border-top: solid black 1px;
}
You can just remove some <li> tags:
<ul>
<li>
abc
<ul>
abc
abc
</ul>
</li>
<li>
abc
<ul>
abc
abc
</ul>
</li>
</ul>
I'm trying to show a nested (sub) list, but hide the parent ULs and LIs through an "active" class so that the sub list looks like the parent list.
The list with the "active" class isn't visible because it inherits display: none from its parent.
Code:
<ul>
<li>
Hidden
<ul>
<li class="active">Visible</li>
</ul>
</li>
</ul>
CSS:
li {
display: none;
}
li.active {
display: block;
}
Fiddle: http://jsfiddle.net/2C8qs
Any ideas?
If you can add span around the hidden text (http://jsfiddle.net/vittore/2C8qs/3/) :
<ul>
<li>
<span>Hidden</span>
<ul>
<li class="active">Visible</li>
</ul>
</li>
</ul>
li span, li li {
display: none;
}
li li.active {
display: block;
}
display: none hides the element and all of its children, that is final and adding display: block to a child won't make it visible again.
This will hide all children, except for the .active element:
ul.parent > li {
display: none;
}
ul.parent > li.active {
display: block;
}
EDIT: Oops, I misread the question. You can do something similar to the above though, if you wrap the other contents in an element.
An ugly CSS trick : http://jsfiddle.net/2C8qs/4/
Instead of using display none/block, I used text-indent, like that :
li {
text-indent: -99999em
}
li.active {
text-indent: 0
}
Note that can only work on inline / text elements.
I know this is very late to this question, but I've found what I would consider a nice solution and thought I'd post it here for whoever might need it in the future.
First of all, wrap all the <li>'s children with <p> (or <div> or anything, it doesn't matter really), but not any sub-<ul>'s. Then, to the child <ul> you want to be visible, add a class called showing. Example (we only want to show the SubSubThing list):
<ul>
<li>
<p>Item</p>
<ul>
<li>
<p>SubItem</p>
<ul>
<li>
<p>SubSubItem</p>
</li>
</ul>
</li>
</ul>
</li>
<li>
<p>Thing</p>
<ul>
<li>
<p>SubThing</p>
<ul class="showing">
<li>
<p>SubSubThing1</p>
</li>
<li>
<p>SubSubThing2</p>
</li>
<li>
<p>SubSubThing3</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Then apply this CSS:
ul>li {
list-style:none;
}
ul>li>p {
display: none;
}
ul.showing>li>p {
display:block;
}
/* Without removing padding and margin,
the sublists appear way over to the right */
ul {
margin-left: 0px;
padding-left: 0px;
}
li {
margin-left: 0px;
padding-left: 0px;
}
Now, only the <li>'s who are direct descendants of ul's with a showing class will display at all. The other items in the list will use no space.
To get the sublists to show bullet points would be easy via CSS, and to show different sublists it is simple to just use jQuery to set showing on the appropriate ul.
Hope that helps.
Obligatory JSFiddle
So the reason you can't simply hide the first li and reveal the second is because the second is contained by the first — you can't reveal and element that is contained by a hidden one.
Therefore, if you put the li element within a span that you'd like to hide, it becomes easy. I've created a class-free version for you here: http://jsfiddle.net/rgpnr6mh/3/
<ul>
<li><span>Hidden</span>
<ul>
<li>Visible</li>
</ul>
</li>
</ul>
I'm assuming you don't want to display the bullets:
ul {
list-style-type:none
}
li span{
display: none;
}
li li {
display: block;
}
So what I need help with, is how do I remove the newline after a <li> and or <ul>
This is my css:
#ranks li {
background: url(/img.png) no-repeat top left;
}
#ranks .sprite-admin{ background-position: 0 0; width: 157px; height: 44px; }
#ranks .sprite-banned{ background-position: -207px 0; width: 157px; height: 44px; }
and this is the html:
<ul id="ranks"><li class="sprite-admin"></li></ul>
It all works well while only one of the <ul id ="etc"> is there, but if there are multiple, it will make a new line and 'stack' them.. is it possible to make them not stack, and just go left to right?
Thanks
EDIT:
Demo : /removed/
You have a few options:
#ranks li {
float: left;
}
This will float all of your list items to the left, without wrapping, until horizontal screen space is no longer available. Alternatively,
#ranks li {
display: inline-block;
}
Which will also put your elements side-by-side, but handle them as bock level elements. If you don't care about block-level styling, you could go with straight inline-display:
#ranks li {
display: inline;
}
Which will treat the list items like any other inline element (such as <span> or <a>).
There are some other inherent styles that exist on list items, as well as their list parent, that you may need to do away with. Be sure to check out margin, and padding.
Demo: http://jsbin.com/iconud/edit#html,live
Look Out Ahead!
You may find that there is an unsightly gap between your list items when they're positioned side-by-side. This is a common problem with inline-lists. One solution is to remove the newline space between closing and opening list item tags:
<ul id="ranks"><li>
Index</li><li>
Contact</li><li>
Portfolio</li>
</ul>
Or have them all inline, a little less discernible:
<ul id="ranks">
<li>Index</li><li>Contact</li><li>Portfolio</li>
</ul>
This is a little tough on the eyes. With HTML, since closing tags aren't always required, you can also leave off the closing tag (though this makes me a bit nervous):
<ul id="ranks">
<li>Index
<li>Contact
<li>Portfolio
</ul>
Multiple Lists Inline Too!
From some of the OP's comments, it appears they might be trying to get not only list items inline, but lists themselves. If that's the case, apply the same aforementioned rules to the lists themselves:
#ranks,
#specs {
margin: 0;
padding: 0;
display: inline-block;
}
#ranks li,
#specs li {
display: inline-block;
border: 1px solid #CCC;
padding: 5px 10px;
}
Here were have identified two sets of rules using selectors that search for id's, and then tags. You could simplify this by apply a common class to the lists, or by basing the selectors off of a common parent element. Next is the markup:
<ul id="ranks">
<li>Index</li>
<li>Contact</li>
<li>Portfolio</li>
</ul>
<ul id="specs">
<li>Foo</li>
<li>Bar</li>
</ul>
This results in both lists, and their items, being displayed in a horizontal fashion.
Demo: http://jsbin.com/iconud/2/edit
with some css
<style type="text/css">
#ranks li { display:block; float:left; }
</style>
updated as comments: with display:block
ul li{ display:inline;} do the trick?
<li> by default is display:block;
if you give it display:inline; or diplay:inline-block; that should remove the linebreak
This is a basic example of horizontal UL's
HTML
<ul id="list">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>
<span class="clearFloats">
CSS
.item {
float: left;
}
.clearFloats {
clear: both;
}
JSFiddle Example: http://jsfiddle.net/peterf/DEUBf/
Another option is to set font-size: 0 in the ul, then restore the desired font-size in the li tags. I prefer this as it's contained within the ul tag, doesn't need further hacks like clear:both, and explains better what the styling is meant to do (hide anything not inside a list item).
ul {
list-style-type: none;
font-size: 0;
}
li {
display: inline-block; /* Or inline, as you like */
font-size: 16px;
}