This question already has answers here:
I need an unordered list without any bullets
(16 answers)
Closed 3 years ago.
I've read multiple topics with this same question and tried following all instructions but I can't seem to remove the bullets from the following <ul> <li> segment.
<div id="mobile-contact-bar-outer">
<ul>
<li><a data-rel="external" href="tel:+18885551212"><span class="fa-stack fa-3x"><i class="fa-fw fas fa-phone"></i>
<span class="screen-reader-text">Phone Number for calling</span></span></a></li>
<li><a data-rel="external" href="mailto:name#email.com"><span class="fa-stack fa-3x"><i class="fa-fw far fa-envelope"></i><span class="screen-reader-text">Email Address</span></span></a></li>
</ul>
</div>
I've added both:
div#mobile-contact-bar-outer {
list-style-type: none!important;
}
div#mobile-contact-bar {
list-style-type: none!important;
}
Neither have any effect. What am I missing? No caching on site.
Add list-style: none to the UL tag. MDN reference
ul {
list-style: none
}
The following does it, you have to edit the ul tag directly as list-style-type isn't valid on divs
div#mobile-contact-bar-outer ul {
list-style-type: none;
}
div#mobile-contact-bar ul{
list-style-type: none;
}
<div id="mobile-contact-bar-outer">
<ul>
<li><a data-rel="external" href="tel:+18885551212"><span class="fa-stack fa-3x"><i class="fa-fw fas fa-phone"></i>
<span class="screen-reader-text">Phone Number for calling</span></span></a></li>
<li><a data-rel="external" href="mailto:name#email.com"><span class="fa-stack fa-3x"><i class="fa-fw far fa-envelope"></i><span class="screen-reader-text">Email Address</span></span></a></li>
</ul>
</div>
you can either add a class to your element like
<ul class="newclass">
and add you list-style-type: none to that element like
ul.newclass{
list-style-type: none
}
this new class will allow more control to this individual ul element
or add the class to your div
div#mobile-contact-bar-outer ul{
list-style-type: none;
}
no need for the important tag now.
Related
This question already has answers here:
Remove underline only from anchor element child
(7 answers)
Closed 5 years ago.
I have a problem with css :not function.
When I hovering to link there is underline both of them Item1 & Description. I don't want to see underline below Description when hover.
Here is my menu code:
<ul>
<li>
<a href="#">
Item 1
<span>Description</span>
</a>
</li>
</ul>
CSS:
span { display:block; }
ul li a:hover:not(span) { color:blue; text-decoration: underline; }
When I change span display to inline-block it is working nice but need to be only block. How can I solve it ?
Also, Inline-block shows the description NEAR of the Item. I want to put it under of the Item Name. How can I make it ?
you are saying to the style a:not(span), A that is not a SPAN, of course a isn't a span ;)
Use a css class for this purpose for instance like :
span { display:block; }
ul li a:not(.has-span):hover { color:red; text-decoration: underline; }
<ul>
<li>
<a href="#">
Item 1
<span>Description</span>
</a>
</li>
<li>
<a href="#" class="has-span">
Item 2
<span>Description</span>
</a>
</li>
</ul>
You shouldn't put your state (:hover) before the selector. So you need to change it to:
ul li a:not(span):hover { color:blue; text-decoration: underline; }
And moreover this will not work, because, a single element cannot be a <a> as well as a <span>. Instead you need to just use:
span { display:block; }
ul li a:hover { color:blue; text-decoration: underline; }
ul li a:hover span { color:black; text-decoration: none; }
How can I remove the underline bellow "-"? I only want the text to be underlined on Hover not the "-"
-- DEMO --
Many thanks!
HTML
<ul class="menu">
<li>
Commercial Property Management
<ul>
<li>
Industrial
</li>
<li>
Office
</li>
<li>
Retail
</li>
<li>
Shopping Centres
</li>
</ul>
</li>
<li>
Mixed-Use Residential Property Management
</li>
</ul>
CSS
ul.menu li li a:before {
content: "-";
margin-right: 8px;
}
Edit 4 years later: This answer is pretty much a low-quality duplicate of https://stackoverflow.com/a/8820459/3285730. I'd recommend going there and getting an actual explanation.
Try giving it display:inline-block;:
ul.menu li li a:before {
content: "-";
margin-right: 8px;
display:inline-block;
}
JSFiddle Demo
content of the :before selector is counted to the a-tag as it creates a pseudo-element within the element.
Add display:inline-block; to the definition to solve this issue.
trying to select an adjacent's child element with CSS... not really sure how to
This is the HTML structure
<ul>
<li>
<a href="#">
<span class="icon"></span>
First level
</a>
<ul>
<li>
Second level
</li>
</ul>
</li>
</ul>
I want to say that there is a menu with multiple levels. When theres a UL existing within a LI then the needs to have a dropdown/expand icon... so I thought if I use the adjacent selector I can determine if this level has kids to expand and this is what I thought would work but didn't:
ul li a ~ ul .icon {
// doesnt work
}
ul li a .icon ~ ul {
// doesnt work
}
This works but I need to target the .icon
ul li a ~ ul {
// works
}
Cheers, Dom
Building upon my comment on your question. If you have control over how the HTML for the menu is generated, a workaround would be to add an extra class to each li-element that has a sub-menu. Like this:
<ul>
<li class="has-submenu">
<a href="#">
<span class="icon"></span>
First level
</a>
<ul>
<li>
Second level
</li>
</ul>
</li>
</ul>
Then you could use a selector like this:
.has-submenu .icon {
/* Do your stuff here */
}
ul is a child of li, not the anchor. So ul li ul .
If you want to select it as a sibling, then ul li a + ul
I have the following structure in some HTML:
<ul class="li_inline">
<li>
<ul class="li_block">
<li>Stuff</li>
<li>Stuff under stuff</li>
</ul>
</li>
<li>
<ul class="li_block">
<li>Stuff</li>
<li>Stuff under stuff</li>
</ul>
</li>
</ul>
With the CSS like this:
.li_inline li
{
display: inline;
}
.li_block li
{
display: block;
}
What I would like to happen is to have the two inner <ul>s side by side, but any <li>s inside them to be below each other. This is so I can get a sidebar and main body side by side, but elements inside them behave normally (ie. one below the other).
Can someone suggest some CSS I can use so that the inner (li_block) lists' <li> elements are displayed as block elements, but the <ul>s themselves are displayed side by side?
Thanks,
James
Use a reset rule.
ul ul { list-style:none; padding: 5px 20px; margin: 5px 10px; }
In your case using the !important can get your job done. But try not to use it
UPDATE
Solution: http://jsfiddle.net/Starx/KHjmP/ (FF3+, Safari 4+, IE8+)
it ain't pretty but you get the jist of it :)
<div style="overflow: hidden;">
<ul class="li_block" style="float: left;">
<li>Stuff</li>
<li>Stuff under stuff</li>
</ul>
<ul class="li_block" style="float: left;">
<li>Stuff</li>
<li>Stuff under stuff</li>
</ul>
</div>
This worked for me:
<html>
<head>
<style type="text/css">
ul.outer{}
ul.outer > li{
float: left;
}
ul.outer > li > ul > li{
display: block;
}
</style>
</head>
<body>
<ul class="outer">
<li>
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
<li>
<ul>
<li>2.1</li>
<li>2.2</li>
</ul>
</li>
</ul>
</body>
</html>
You should be able to do something as simple as the following. I tested it in Firefox, Chrome and IE7.
.li_inline > li {
display: inline;
}
.li_inline > li > ul {
float: left;
}
http://jsfiddle.net/fzBnG/
.li_inline li {
display: inline-block;
float: left;
}
.li_block li {
display: block;
clear:both;
}
First, thanks for everyone's help! I'm really sorry to look like I'm ignoring your hard efforts away, but I have taken note of all your answers, and they're all very handy.
The solution I have come up with is to simply use display: inline-block for both inner uls, with the outer one left default.
Once again, thanks for your help everyone.
James
I have match listings dynamically generated. After each member I display a li that displays VS within it. However the very last ul li in the div match shouldnt be visible. Any ideas how I can do that?
HTML
<style>
.match {
}
.match ul {
}
.match ul li {
float: left;
margin-right: 50px;
}
.match ul li:last-child {
display: none;
}
</style>
<div class="content">
<div class="match">
<ul>
<li>Wade Barrett</li>
<li style="">VS</li>
</ul>
<ul>
<li>Shaemus</li>
<li style="">VS</li>
</ul>
<ul>
<li>Randy Orton</li>
<li style="">VS</li>
</ul>
<ul>
<li>John Cena</li>
<li style="">VS</li>
</ul>
<ul>
<li>Edge</li>
<li style="">VS</li>
</ul>
<ul>
<li>Chris Jericho</li>
<li style="">VS</li>
</ul>
<p class="clear"></p>
</div>
</div>
The :last-child pseudo-class should apply to the ul, not li, because you want VS text of the last ul of the list to be hidden. By applying the pseudo-class to li, you're applying styles to the last li of every ul, which is incorrect.
You should also apply a class attribute to the li elements with the VS text so that it's more convenient to match with a class selector.
Change
<li style="">VS</li>
to
<li class="vs">VS</li>
And use this instead of your current :last-child selector:
.match ul:last-child li.vs {
display: none;
}
What browser are you using, IE does not support it. The latest version of the other browsers do, but I would recommend placing a class on it to make it 100%.