My footer currently has a series of links of varying size that, as the page's width decreases, automatically wrap around to the next line.
<ul class="footer-links">
<li>text 1</li>
<li>text 2</li>
<li>text 3</li>
<li>longer text 1</li>
<li>text 4</li>
<li>text 5</li>
<li>longer text 2</li>
<li>much longer text 1</li>
<li>longer text 3</li>
<li>text 6</li>
<li>much longer text 2</li>
<li>very much longer text 1</li>
<li>text 7</li>
<li>longer text 4</li>
</ul>
see http://jsfiddle.net/X6EWn/
What I want is to get each of the rows to always be centered, even as the links wrap around.
Any ideas on how this can be accomplished?
This will give you what you want. See fiddle: http://jsfiddle.net/harveyramer/NF2tm/
ul.footer-links {
display: block;
list-style-type: none;
text-align: center;
}
ul.footer-links > li {
margin: 3px 5px;
display: inline-block;
}
Harvey hit the nail on the head. However, it can be bettered by setting the uls font-size to 0, then declaring the fontsize on the li, in order to remove that pesky white space in between each li. Code Below...
ul.footer-links {
display: block;
list-style-type: none;
text-align: center;
font-size: 0;
}
ul.footer-links > li {
margin: 3px 5px;
display: inline-block;
font: 100 12px/20px 'Arial', sans-serif;
}
Original credit goes to Harvey for answering first.
Related
I am trying to cater for line breaks in a list so that the bullet points are used more like separators instead, I have this so far...
ul {
margin:auto;
max-width:280px;
list-style:none;
text-align:center;
}
li::before {
content: "•";
color: red;
}
li {
display:inline;
}
<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>
How can I make sure that list items aren't split between lines and also make sure that bullet points only display if it isn't a new line?
I am try to make things look like this...
The width of the container and the number of items does change so trying to do this without assigning individual classes
A couple of techniques will help you achieve this effect.
1st use first-child on the list element to hide the first separator.
The second is a little hacky but it's the way to hide the bullet when the menu rows wrap; Use a pseudo-element on the ul to create an overlay to hide the first bullet in the second row.
If you want to align the bottom row to the middle you're going to want to use flexbox, with justify-content:center and move your bullet to the right after each element. Move the ul overlay to the right and hide the bullet of the last-child instead of the first-child.
ul{margin:auto;max-width:300px;list-style:none;text-align:center; position:relative; overflow:hidden;padding-left:0; display:flex; flex-wrap:wrap; justify-content: center; }
ul:before {content:" "; height: 100%; position:absolute; right:0; width:0.75rem; background-color: #fff; z-index:2; }
ul> li{display:inline; padding:0 0.5rem; position:relative;}
ul > li:before {position:absolute; right:0; transform:translateX(50%); content: "•"; color: red;}
ul > li:last-child:before{ display:none;}
<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>
How would you make all of the <li> items in a <ul> element to be displayed in a line, and how would you center that entire list on the page? You must apply your CSS directly to the <ul> element itself, you cannot use a parent element.
I tried with display:inline-flex but then you can't align the <li> items in center so any possible way to do this?
Here is my Fiddle but I cannot align the <li> in center as :
https://jsfiddle.net/pymg30yr/
The problem with inline-flex is that your ul will take the width of its content so you cannot center the items inside (as there is no space either side)
In order to fix this, just make the ul flex and then add justify-content:center:
ul {
padding:0;
margin:0;
display: flex;
list-style: none;
justify-content:center;
}
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
<li>Link 10</li>
</ul>
html
<ul>
<li>a list item </li>
<li>a loooooooooooooooooooong list item </li>
<li>another list item</li>
</ul>
css
ul {
display: table;
margin: 0 auto;
}
li {
float: left;
margin: 0 10px;
list-style-type: none;
}
demo
http://jsfiddle.net/fNFYr/467/
I have an HTML list with display: inline-block which I want to separate with a line to make a footer menu.
For that I apply a left border for every list item that has an item before. However, when screen is smaller and the line breaks, the first item in the second line shows the border.
How can I hide the border on the first item on the second line once the line breaks?
Here is a fiddle: https://jsfiddle.net/ur7dyL7u/3/
<style type="text/css">
li {
line-height: 24px;
display: inline-block;
border-right: none;
}
li~li {
border-left: red 2px solid;
padding-left: 5px;
}
div{
text-align:center;
}
</style>
<div>
<ul>
<li>Item nr 1</li>
<li>Item nr 2</li>
<li>Item nr 3</li>
<li>Item nr 4</li>
<li>Item nr 5</li>
<li>Item nr 6</li>
<li>Item nr 7</li>
<li>Item nr 8</li>
<li>Item nr 9</li>
<li>Item nr 10</li>
</ul>
<div>
I think there is no way to do that the way you want to, you will have to change the approach;
I tried those styles to achieve what you want:
ul{
padding:0; overflow:hidden;
}
li {
line-height: 24px;
display: inline-block;
border-right: none;
padding-left: 5px;
}
li~li {
box-shadow: -2px 0px 0px red;
}
Instead of a border, I use box shadow that is outside the box and set overflow hidden to the list so it will always hide the shadow of the first element on each line.
Here is a working example: https://jsfiddle.net/2o18jkfL/
Another one that "works" with text-align:center
http://codepen.io/sergio0983/pen/YpKxzQ
EDIT
Different approach using :before to cover the line on the first item in each line:
http://codepen.io/sergio0983/pen/eBOEpY
If you have no problem with having a separation in the first line when line-breaks you can do this:
Instead of using border-left use border-right in all your li elements except the last one.
ul {
text-align: center;
}
li {
line-height: 14px;
display: inline-block;
}
li:not(:last-child) {
border-right: red 1px solid;
padding-right: 10px;
}
<ul>
<li>Item nr 1</li>
<li>Item nr 2</li>
<li>Item nr 3</li>
<li>Item nr 4</li>
<li>Item nr 5</li>
<li>Item nr 6</li>
<li>Item nr 7</li>
<li>Item nr 8</li>
<li>Item nr 9</li>
<li>Item nr 10</li>
</ul>
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