I'm having a problem displaying a bulleted list like what is on the image attachment link. I've already tried almost possible CSS combination but unable to achieve what I want:
My code goes something like this:
.sunco-listed {
width: 500px;
}
.sunco-listed ul {
text-align: center;
}
.sunco-listed li {
float: left;
padding-right: 25px;
}
.sunco-listed li:nth-child(1) {
list-style: none;
}
<div class="sunco-listed">
<ul>
<li>Spare parts 1</li>
<li>Spare parts 1</li>
<li>Spare parts 1</li>
<li>Spare parts 1</li>
<li>Spare parts 1</li>
<li>Spare parts 1</li>
<li>Spare parts 1</li>
<li>Spare parts 1</li>
</ul>
</div>
Any assistance/help would be highly appreciated.
flex on the parent will retain the list-item bullets, with justify-content: center and flex-wrap: wrap so they'll wrap with the limited width, then use :first-child and :last-child for the first/last effect.
.sunco-listed {
width: 500px;
}
.sunco-listed ul {
justify-content: center;
display: flex;
flex-wrap: wrap;
}
.sunco-listed li {
padding-right: 25px;
}
.sunco-listed li:first-child {
list-style: none;
}
.sunco-listed li:last-child {
font-weight: bold;
}
<div class="sunco-listed">
<ul>
<li>Spare parts 1</li>
<li>Spare parts 1</li>
<li>Spare parts 1</li>
<li>Spare parts 1</li>
<li>Spare parts 1</li>
<li>Spare parts 1</li>
<li>Spare parts 1</li>
<li>Spare parts 1</li>
</ul>
</div>
Related
I have the following code:
HTML
<ul class="menu">
<li>Item 1</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
<li>Item 4</li>
</ul>
CSS
ul.menu
{
display: flex;
list-style: none;
}
ul.menu li::before
{
content: "\2022";
}
Items 1 and 4 work fine but there is one extra space before items 2 and 3 (right after the bullet). I know that's because there is a new line in HTML for these items. However, everything works fine without the ul.menu li::before rule.
I'm sure I'm missing something obvious. Does anyone have an idea how to get rid of the extra space and still preserve new lines in HTML? Some neat solution maybe, rather than just ul.menu li a::before (this one is not good, it makes the bullets clickable as well).
JSfiddle
P.S.: same problem appears even without display: flex; so it's obviously not flexbox-related.
The space you see is a characteristic of all inline elements - just add display: flex to the li too.
See demo below and my updated Fiddle:
body {
font-family: sans-serif;
}
ul.menu {
display: flex;
list-style: none;
}
ul.menu li::before {
content: "\2022";
}
ul.menu li {
display: flex;
}
<ul class="menu">
<li>Item 1
</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
<li>Item 4
</li>
</ul>
You have to write <li> for item2 and item3 in same line it will remove space.
Try this code. It works.
JSFiddle
HTML
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
CSS
body
{
font-family: sans-serif;
}
ul.menu
{
display: flex;
list-style: none;
}
ul.menu li::before
{
content: "\2022";
}
I want my <li> elements to be horizontally aligned in each <ul> block, but each <ul> block to start on the left on a new line. The following will not work. The <ul>s are shown on the same line.
<style>
.fl {
float: left;
}
</style>
<ul>
<li class='fl'>Test 1</li>
<li class='fl'>Test 2</li>
</ul>
<ul>
<li class='fl'>Test 3</li>
<li class='fl'>Test 4</li>
</ul>
https://jsfiddle.net/bcLudxwj/
How do I fix it?
Method-1 :Using display: flex;
Add ul Css display: flex; and Remove inline Style in <ul style='display:block'> tag.Below Example see
ul
{
display: flex;
}
li.fl
{
float:left;
margin-right:10px;
list-style-type: none;
}
Live Demo Here
Snippet Example Below
ul
{
display: flex;
}
li.fl
{
float:left;
margin-right:10px;
list-style-type: none;
}
<ul>
<li class='fl'>Test 1</li>
<li class='fl'>Test 2</li>
</ul>
<ul >
<li class='fl'>Test 3</li>
<li class='fl'>Test 4</li>
</ul>
Method-2 :Using display: table;
Add ul Css display: flex; and Remove inline Style in <ul style='display:block'> tag.Below Example see
ul
{
display: table;
}
li.fl
{
float:left;
margin-right:10px;
list-style-type: none;
}
Live Demo Here
Snippet Example Below
ul
{
display: table;
}
li.fl
{
float:left;
margin-right:10px;
list-style-type: none;
}
<ul>
<li class='fl'>Test 1</li>
<li class='fl'>Test 2</li>
</ul>
<ul >
<li class='fl'>Test 3</li>
<li class='fl'>Test 4</li>
</ul>
The uls don't start in a new line as you have not cleared the floats for each ul block.
Also add a margin too to account for the space for the bullets of the un-ordered list - see demo below:
update fiddle: https://jsfiddle.net/xu9j3rsp/
.fl {
float: left;
margin: 15px;
}
ul:after {
content: '';
display: block;
clear: both;
}
<ul>
<li class='fl'>Test 1</li>
<li class='fl'>Test 2</li>
</ul>
<ul>
<li class='fl'>Test 3</li>
<li class='fl'>Test 4</li>
</ul>
The containers of the elements with float attribute need a "cap" to be correctly used. this cap is usually called "clearer". You need to create a class "clearer" like this in the css:
<style>
.clearer {
clear:both;
}
</style>
And put this <div class="clearer"></div> before each </ul>
Try This Code :
.fl{ float:left;clear:both;}
display inline-block for list items and display block for ul
ul li{
display:inline-block;
}
ul{
display:block;
}
You need to clear the ul:
ul {
overflow: hidden;
}
I'm looking for any nice way to automatically put the list disc marker above text instead of at the left. Like so :
I'm currently using something like :
<li>
<br />
Item 1
</li>
<li>
<br />
Item 2
</li>
<li>
<br />
Item 3
</li>
To force the text to be placed under the dot but in one hand adding line breaks before text in each list item makes the source quite confusing and one the other hand, it does not do what I expect, since even with a text-align: center the dot appears slightly on the left because of an implicit margin on the right of each dot.
Maybe am I missing some CSS property or my approach is not good.
Any advice is welcomed, thanks.
li {
display: inline-block;
background: pink;
}
li::before {
content:'•';
display: block;
text-align: center;
}
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
Those solutions do not change <li> default behavior.
DEMO 1
HTML (with br tag)
ul {
list-style-position: inside;
background: yellow;
overflow: hidden;
}
li {
float: left;
text-align: center;
}
<ul>
<li><br />Item 1</li>
<li><br />Item 2</li>
<li><br />Item 3</li>
</ul>
DEMO 2
HTML (no br tag)
ul {
list-style-position: inside;
background: yellow;
overflow: hidden;
}
li {
float: left;
text-align: center;
}
li:before {
content: "";
display: block;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
I have two divs. When I rollover on a link, I want to hide one div and show the other so it appears as if the background color has changed. Here is some example HTML:
<div id="main-nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="sub-nav">
<ul>
<li>SubItem 1</li>
<li>SubItem 2</li>
<li>SubItem 3</li>
</ul>
</div>
The sub-nav div is EXACTLY the same as the main-nav div, except the background-color is different.
#main-nav {
width: 500px;
height: 250px;
background-color: black;
display: block;
}
#sub-nav {
width: 500px;
height: 250px;
background-color: white;
display: none;
}
All I want to do is show the #sub-nav div whenever an item in the #main-div is hovered over. So the effect will be that the background-color appears to change from black to white on hover.
Can I do this using only CSS?
Basically I am wanting to know if I can change the display property of a containing div whenever an element inside that div (the <a> tag) is hovered over? That is, hovering on a link should cause its containing div #main-nav to change to display: none and the #sub-nav div to become display:block
No you can't do this just with CSS. You would need the subnav to be a child of the element you are hovering or directly adjacent to it.
You could use css selectors like
#main-nav li:hover .sub-nav{}
or
#main-nav li:hover + .sub-nav{}
Alternatively you could use javascript
Why not just change the background color? Like this:
<div id="main-nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
#main-nav:hover { background-color: black; }
Edit you can do exactly what you asked, but you'd need a wrapper for that:
<div class="navigation-wrapper">
<div class="main">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class="sub">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
And in your css:
.navigation-wrapper .sub { display: none; }
.navigation-wrapper:hover .main { display: none; }
.navigation-wrapper:hover .sub { display: block; }
Fiddle demo
Trying to use a list with 5 (or more items) gotten the code to work but trying to get it to work as the desired image shows.
I'm very new at css so please bear with me. thanks
Any help would be appreciated.
Desired:
Item 1 Item 2 Item 3 Item 4 Item 5
Currently:
Item 1 Item 5 Item 4 Item 3 Item 2
CSS
#navlist li
{
display: inline;
}
#navlist #right
{
float: right;
margin-right: 10px;
}
#navlist li a
{
text-decoration: none;
}
HTML
<div id="navcontainer">
<ul id="navlist">
<li>Item 1</li>
<li id="right">Item 2</li>
<li id="right">Item 3</li>
<li id="right">Item 4</li>
<li id="right">Item 5</li>
</ul>
</div>
Try using display: table in your CSS:
#navlist
{
display: table;
}
#navlist li
{
display: table-cell;
padding-right: 10px;
white-space: nowrap;
}
#navlist li:last-child
{
padding-right: 0;
}
#navlist li.span-full
{
width: 100%;
}
And your markup now looks like this:
<div id="navcontainer">
<ul id="navlist">
<li class="span-full">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
Here's an updated fiddle: http://jsfiddle.net/QfD6J/7/
You can do it like this jsFiddle example
Using this CSS
#navlist li {
display:inline-block;
list-style-type:none
}
#navlist li:nth-of-type(1) {
margin-right:60px;
}
You can also use float:left instead of display:inline-block
Just put
float: left;
inside #navlist li and #navlist #right.
Why not using 2 lists with one floating on the right? http://jsfiddle.net/rEc3V/
<div id="navcontainer">
<ul class="nav pull-right">
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<ul class="nav">
<li>Item 1</li>
</ul>
</div>
CSS:
.nav {
list-style-type: none;
padding: 0;
margin: 0;
}
.nav li {
display: inline-block;
}
.pull-right {
float: right;
}
this seems to work jsfiddle.net/Z3a6Z/23. thanks everyone for the direction.