This question already has answers here:
A space between inline-block list items [duplicate]
(8 answers)
Closed 7 years ago.
I'm trying to cover the top of my site with list items.
My list items are appearing like this:
And i don't know why this separation between them. They don't have any margin and padding.
Anyone knows why is this?
HTML:
<ul class="listras-lista">
<li class="listras-lista_item"></li>
<li class="listras-lista_item"></li>
<li class="listras-lista_item"></li>
<li class="listras-lista_item"></li>
<li class="listras-lista_item"></li>
<li class="listras-lista_item"></li>
</ul>
CSS:
.listras-lista {
list-style: none;
width: 100%;
}
.listras-lista_item {
display: inline-block;
background: #CC00CC;
width: 20%;
height: 5px;
padding: 0;
}
It's whitespace that causes the spaces. If you can, change the markup so that </li><li> are together
This is caused by display: inline-block;. Change it to float:left;.
Related
This question already has an answer here:
Avoid an element to be split into two columns while using column-count
(1 answer)
Closed 3 years ago.
.main{
column-count: 2;
}
.main .list{
background: #ccc;
padding: 10px;
list-style-type: none;
}
.main .list:hover{
background: #11e;
}
<ul class="main">
<li class="list">list-item-1</li>
<li class="list">list-item-2</li>
<li class="list">list-item-3</li>
<li class="list">list-item-4</li>
<li class="list">list-item-5</li>
<li class="list">list-item-6</li>
<li class="list">list-item-7</li>
</ul>
When I hover on the list-item-4 I can see the hover color covers some section on the second column as well. How can fix it?
You can use break-inside: avoid; to prevent the experienced behaviour.
You do not need to use vendor prefixes as usage of break-inside is already supported by more than 99% of the browsers according to caniuse.com
Please have a look at my JSFiddle to see it working.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
Trying to select the 'contacts' li within CSS and add a right margin.
.navLinks #contacts {
margin-right: 20px;
}
<ul class="navLinks">
<li id="contacts">contacts</li>
<li id="about">about</li>
<li id="index">home</li>
</ul>
I have also tried to select it with .navlinks li #contacts and just #contacts. Neither seem to work; I'm not sure why.
Margin-right doesn't seems to be right. Because anyway, you cannot see that because this is in the left side. And nothing wrong in referring the contact id from the navlinks. Perhaps you want it to move a bit to right right. For that use margin-left
.navLinks #contacts {
margin-left: 20px;
}
<ul class="navLinks">
<li id="contacts">contacts</li>
<li id="about">about</li>
<li id="index">home</li>
</ul>
.navLinks #contacts {
margin-left: -20px;
}
<ul class="navLinks">
<li id="contacts">contacts</li>
<li id="about">about</li>
<li id="index">home</li>
</ul>
The li element is a block element with a full width of 100%; that means it stretched to the full width of the row. if you are to use margin on it, you need to either add width property to it, or you need to make the display property inline.
Try this; you will see the effect.
.navLinks #contacts{
margin-left: 200px;
margin-right: 200px;
color: red;
background: red;
width:200px;
}
<ul class="navLinks">
<li id="contacts">contacts</li>
<li id="about">about</li>
<li id="index">home</li>
</ul>
So, i am creating a menu, and i noticed that there is some unexplainable margin between li's. It also can not be seen in dev's console. Here is the code:
HTML
<div class="navbar">
<ul class="navbar_ul">
<li class="navbar_list_item navbar_main">Point Blank</li>
<li class="navbar_list_item navbar_main">Tanki Online</li>
<li class="navbar_list_item navbar_main">Dota 2</li>
<li class="navbar_list_item navbar_main">Warface</li>
<li class="navbar_list_item navbar_minor">Топ аккаунтов</li>
<li class="navbar_list_item navbar_minor navbar_last_item">О нас</li>
</ul>
</div>
And, here is the CSS:
.navbar_list_item {
display: inline-block;
}
.navbar, .navbar ul, .navbar li {
text-align: center;
padding: 0;
}
.navbar_ul {
width: 100%;
}
.navbar_list_item {
color: white;
width: 16.3%;
margin: 0;
height: 40px;
}
.navbar_main {
background-color: #3978C2;
}
.navbar_minor {
background-color: #2E3A86;
}
Here is the screenshot of menu:
Thank you!
This looks like the space/new line characters between </li> and <li> tags. Try to write the markup as such:
<li>content</li><li>content</li><
li>another content</li><li>yet another one</li>
The space is there is a 'side effect' (actually confusing but intended behavior) of how display: inline-block works. Inline block elements are rendered the same as inline elements, namely it assumes that they should be part of a line of text. Add to that the fact that HTML compresses all whitespace (space, tab, newline) into a single space and what happens is the newline character between each LI becomes a space character and you have a small visible gap between elements.
There are several methods to fight this. You might
Use negative margins to bump the elements back in line
Use zero-sized font
Use display: block and float: left
Use display: table
Remove all whitespace characters between LIs in your code
And there are other methods. Each has its own advantages and disadvantages.
A nice writeup of different solutions can be found here: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
There are no margin between li element. the space between each li is related to your
width: 16.3%;
so you have 6 li element proportionally spaced ..
This mean that for each element the width is fixed..
I have the following code: https://jsfiddle.net/u8db2j75/1/ and it works fine, I have the effect I wanted - a picture and some text next to it. But now I want to add another component, a navigation bar - and I want to add it on top of the page. So what I followed the example given here http://css-snippets.com/simple-horizontal-navigation/ and I created the code like this:
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="tutorials"><a class="active" href="#">Tutorials</a></li>
<li class="about">About</li>
<li class="news">Newsletter</li>
<li class="contact">Contact</li>
</ul>
</div>
https://jsfiddle.net/u8db2j75/2/ however, after modifying css as well -as you can see - the effect is far from what I expected... What did go wrong here?
Give your .nav ul and .nav a min-width of 100%.
Example:
.nav {
min-width:100% !important;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
position: absolute;
top: 0;
padding: 0;
margin: 0;
min-width: 100%;
}
https://jsfiddle.net/u8db2j75/4/
I don't have 50 reputation to comment the answer above, but:
List item needs to be displayed inline, or floated to the left so the result will be a horizontal navigation as per the examble shown in the issue.
I have made a horizontal navigation bar using styles, but I've encountered a major issue... Since <li> is a block element, I can't align it using text-align:right, which makes me unable to align it properly. I've tried using the display:inline; syntax for the list-item element, but that doesn't make any difference either (which makes sense actually).
My question being, is there any way of aligning horizontal <li>, without having to use float:right;? I want it to fit the current list's format (which I've adjusted to fit a parent div), and using float isn't really a good or safe method. Here's a screenshot of what I got so far (layout is slightly messed up due to recent addition of image). As you can see, I have managed to get the "My page" and "Log out" properly placed, but as soon as I add something more "complex" (like the "+", which now is placed in the normal list), it gets screwed up... I really don't get how other websites manages to get this right.
You must define text-align: right for the containing element
HTML:
<ul class="nav">
<li class="menu">1</li>
<li class="menu">2</li>
<li class="menu">3</li>
<li class="menu">4</li>
<li class="menu">5</li>
</ul>
CSS:
.nav {
text-align: right;
}
.menu {
display: inline;
}
JSFiddle
You can split the menu to a left and right part, if you like. Add or remove padding and margin as needed
HTML:
<ul class="nav left-nav">
<li class="menu">1</li>
<li class="menu">2</li>
<li class="menu">3</li>
</ul>
<ul class="nav right-nav">
<li class="menu">4</li>
<li class="menu">5</li>
</ul>
CSS:
.nav {
margin: 0;
padding: 0;
}
.left-nav {
text-align: left;
}
.right-nav {
text-align: right;
}
.menu {
display: inline;
}
JSFiddle
Here you go i think this is what you are looking for:
jsfiddle.net/Sdw5h/