I know that this must be one of most asked questions, but I really want to understand - why justified grid menu must have a space between <li> elemtents?
I made an example here: http://jsbin.com/oNibesA/1/edit
CSS:
.inline-list {
text-align: justify;
list-style: none;
margin: 0;
padding: 0;
}
.inline-list:after {
content: "";
display: inline-block;
width: 100%;
}
.inline-list li {
display: inline-block;
margin: 0;
padding: 0;
}
.inline-list li:before {
content: ' ';
}
.inline-list li a {
display: block;
padding: 5px 10px;
}
This HTML (with spaces) works fine - it spreads the elements evenly in one line:
<ul class="inline-list">
<li><a>Everything</a></li>
<li><a>Is</a></li>
<li><a>Fine</a></li>
<li><a>With</a></li>
<li><a>Multiline</a></li>
<li><a>HTML</a></li>
</ul>
But this HTML (all in one line without spaces) doesn't spread evenly:
<ul class="inline-list"><li><a>This</a></li><li><a>Is</a></li><li><a>A</a></li><li><a>Weird</a></li><li><a>CSS/HTML</a></li><li><a>Bug</a></li></ul>
Now I know that it happens, but I'm curious - why it happens?
And can you somehow fix this (for example, put the space between the <li> elements) just by using CSS?
why justified grid menu must have a space between <li> elemtents?
That's because with that space each inline-block is considered like one separated element, lets say in case of justify that space is rendered and works to set each element like a single word. Then justify can do his job.
If you remove the space is like you are getting together all blocks like one word and justify can just break it.
Edit
As You can see on this Demo Fiddle if you save that whitespace inline-block can work as single words other properties like letter-spacing and word-spacing also modify the inline-block behavior.
Would display:flex; be an alternative if you minify your HTML ?
http://jsbin.com/oMIdODaZ/1/
.inline-list {
margin: 0;
padding: 0;
display:flex;
justify-content : space-between;
}
li {
display:inline-block;
background:gray;
}
limits at this avearge time: http://caniuse.com/flexbox
Because there is no whitespace between the different words they are considered as one single word. justify doesn't have any effect on one word, since it changes the space between words.
Related
Pretty simple question, but I am not sure if it is possible. I want to add an image to act as a bullet in all <h1> elements. I know I can achieve this by:
<span class='bullet'></span><h1>My H1 text here</h1>
with css:
.bullet{
background: url('bullet.png') no-repeat;
display:inline-block;
vertical-align: middle;
background-size:100%;
height:25px;
width:25px;
margin-right: 5px;
}
but is there an automatic way to do the same thing? I was thinking something like:
h1{
list-style-image: url('bullet.png');
}
but that only seems to work with <ul> elements. I really don't want to have to paste the <span> element everywhere before the <h1> element. Any ideas?
While you can use a :before pseudo-selector to add a "-" or "•" character in front of your element, it doesn't really make your element behave like a bullet point. Your element may look like a bullet point, but that's just a dirty hack, really, and should be avoided!
To make your element both (1) look like a bullet point and (2) behave like a bullet point, you should set the display of that element to list-item. Optionally, you can also set list-style-type (default : disc) and list-style-position (default : outside) attributes to modify the behavior / look-and-feel of your list item.
If your element spans multiple lines, list-style-position should be the default value outside if you want all of your lines to align to the right of your bullet point. In that case, however, it is possible you don't see your actual bullet point, as it would be to the left of the content of your element. If this happens, you can just add a left margin to move the element's content to the right, and your bullet point should show up.
EXAMPLE 1
h1 {
display: list-item; /* This has to be "list-item" */
margin-left : 1em; /* If you use default list-style-position 'outside', you may need this */
}
<h1>
Your H1 text should go here. If it consists of multiple
lines, the left alignment of all lines is the same.
</h1>
<h1>
Here's another item.
</h1>
EXAMPLE 2
h2 {
display: list-item; /* This has to be "list-item" */
list-style-type: square; /* See https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type */
list-style-position: inside; /* See https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position */
}
<h2>
Your H2 text should go here.
</h2>
<h2>
Note that, if you have multiple lines, only the first
line is aligned to the right of the bullet point when
using list-style-position 'inside'. Subsequent lines
are left aligned with the left of the bullet point.
</h2>
You could do something like this:
h1:before {
content:"• ";
}
See Fiddle :
http://jsfiddle.net/6kt8jhfo/6/
You can use pseudo-selector :before to add anything what you want before your tag.
h1:before {
content: "- "
}
<h1>My H1 text here</h1>
Give a class name to the paragraph or any element and apply the below code
(I have given class name as bullet):
.bullet::before {
content: '';
position: absolute;
bottom: 7px;
left: -10px;
width: 3px;
height: 3px;
background-color: #000;
border-radius: 50%;
}
Something like this should work
h1, h2, h3 {
background: url("the image link goes here") 0 center no-repeat;
padding-left: 15px; /* change this to fit your needs */
}
If you want to adjust dot size, color and position you can do this:
.bullet:before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 5px;
display: inline-block;
background-color: #29cf00;
vertical-align: middle;
}
list-style-type is reserved for ul only.
You can use <h1 class="bullet"> with pseudo-element :before.
The very simple way to create a bullet using the before css is to utilize the font family ... this way there is no need to include any graphics and etc.
here is the class code:
.SomeClass:before {
font-family: "Webdings";
content: "= ";
{
Nope, list-style and list-style-image are only for ul and ol tags you'll have to get back to your first method or make something with js
http://www.w3schools.com/css/css_list.asp
http://www.w3schools.com/cssref/pr_list-style-type.asp
Just use
<p>• </p>to create a dot in front of your word
I try add margin top and margin left, but not working.
<li>li 1 <br/> new line</li>
<li>li 2 <br/> new line</li>
And CSS
li {
list-style: none;
counter-increment: foo;
display: table-row;
}
li::before {
content: "-";
display: table-cell;
text-align: right;
padding-right: 5px;
}
https://jsfiddle.net/b5rtg568/
You cannot apply margins on a table-cell, also the way you are trying to accomplish your task seems to be pretty weird, try using CSS positioning techniques for the same result and in a better way like
Demo
Demo 2 (Using margin on li elements)
li {
list-style: none;
margin-left: 15px;
position: relative;
}
li::before {
content: "-";
position: absolute;
left: -10px;
}
Here, am using CSS positioning techniques to move the - prefixes outside the list item by using negative value for left property. Here, you can now use margin-top and margin-left properties for your li elements, and if you need you can also position the - accordingly.
Some tips, instead of wrapping the text using li you should be using p tags or <h2> or <h3> tags which will give more semantic meaning to your content and you won't have to use dirty <br> tags to separate your content in two lines because that will be accomplished automatically if you will use the above elements I suggested which are block level by default and will take 100% of the space.
Margin, padding, height will have no effect on 'table-row', hence you have to your li display property to 'block'.
So I have a <ul> that I need to style. I'm using +'s to style it. It looks like this:
+ abc
+ 123
+ hello
The problem I'm having is that I'm not able to center the +'s with the actual li's. As in, So the pluses are ever so slightly off, when I need them to vertically align with the li text. Anyone know what I'm doing wrong?
Here's a link to the fiddle.
CSS
ul {
list-style: none;
display: table-cell;
padding: 0;
margin: 0;
}
li {
padding-left: 1em;
text-indent: -1em;
}
li:before {
content: "+";
padding-right: 5px;
vertical-align: middle;
display: inline;
padding-top: 0;
margin-bottom: .5em;
}
Edit
Okay, I didn't mean align the #content with the other ul. I meant vertically center the + with the abc.
vertical-align: text-bottom;
http://jsfiddle.net/2FZx6/4/
You don't want to have the + in the middle of your li, but on the same height as a lower-case letter. That's why you have to use text-bottom instead of middle. If you were to use letters with descenders (such as g or y) you would notice that the actual dots also aren't in the middle of the element/text, but on text-bottom or baseline.
(Actually, the default value baseline works pretty well.)
Resources
MDN: vertical-align
Without using a reset stylesheet such as Eric Meyers or Normalize.css your browser automatically adds default styles. In my case, chrome added 40px to your ULs.
I explicitly set the padding to 20px and it looks good, but I'd implement a reset stylesheet if you can to save headaches down the road.
JsFiddle
ul {
padding-left:20px;
margin:0;
}
You may have better luck just using a background image on your li instead of using the "+" - This way you can position the "+" (as a background image) however you'd like.
http://css.maxdesign.com.au/listutorial/master.htm
This method gives you a bit more fine tuning.
http://jsfiddle.net/2FZx6/9/
li:before { // add these bits
position: relative;
top: -.2em ; // fine tune this however you want
}
Might not work for everyone but for my situation I adjust accordingly by adding lineheight to the li (text) and the li:before (font awesome icon):
li {
/* li css */
line-height: 16px;
li:before {
/* li before css */
line-height: 12px;
}
Hope that helps someone else too!
<p>Text</p>
<ul>
<li>One</li>
</ul>
<p>Text 2</p>
How do i remove the vertical space between paragraph and the list.
To be more specific - how do I reduce the bottom margin/padding of the p tag ONLY when followed by an unordered list. All the answers I see here remove the space after all p tags - that's not what was asked.
You can use CSS selectors in a way similar to the following:
p + ul {
margin-top: -10px;
}
This could be helpful because p + ul means select any <ul> element after a <p> element.
You'll have to adapt this to how much padding or margin you have on your <p> tags generally.
Original answer to original question:
p, ul {
padding: 0;
margin: 0;
}
That will take any EXTRA white space away.
p, ul {
display: inline;
}
That will make all the elements inline instead of blocks. (So, for instance, the <p> won't cause a line break before and after it.)
One way is using the immediate selector and negative margin. This rule will select a list right after a paragraph, so it's just setting a negative margin-top.
p + ul {
margin-top: -XX;
}
This simple way worked fine for me:
<ul style="margin-top:-30px;">
I got pretty good results with my HTML mailing list by using the following:
p { margin-bottom: 0; }
ul { margin-top: 0; }
This does not reset all margin values but only those that create such a gap before ordered list, and still doesn't assume anything about default margin values.
p, ul{
padding:0;
margin:0;
}
If that's not what your looking for you'll have to be more specific
You can (A) change the markup to not use paragraphs
<span>Text</span>
<br>
<ul>
<li>One</li>
</ul>
<span>Text 2</span>
Or (B) change the css
p{margin:0px;}
Demos here: http://jsfiddle.net/ZnpVu/1
Every browser has some default styles that apply to a number of HTML elements, likes p and ul.
The space you mention is likely created because of the default margin and padding of your browser. You can reset these though:
p { margin: 0; padding: 0; }
ul { margin: 0; padding: 0; }
You could also reset all default margins and paddings:
* { margin: 0; padding: 0; }
I suggest you take a look at normalize.css: http://necolas.github.com/normalize.css/
I ended up using a definition list with an unordered list inside it. It solves the issue of the unwanted space above the list without needing to change every paragraph tag.
<dl><dt>Text</dt>
<dd><ul><li>First item</li>
<li>Second item</li></ul></dd></dl>
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 8 years ago.
Possible Duplicate:
Unwanted margin in inline-block list items
How to remove “Invisible space” from HTML
Why do the inline-block list items have a space in them? No matter how I make my list items into a menu, I always get spaces.
li {
border: 1px solid black;
display: inline-block;
height: 25px;
list-style-type: none;
text-align: center;
width: 50px;
}
ul {
padding: 0;
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
I have seen this and answered on it before:
After further research I have
discovered that inline-block is a
whitespace dependent method and
is dependent on the font setting. In this case 4px is rendered.
To avoid this you could run all your
lis together in one line, or block
the end tags and begin tags together
like this:
<ul>
<li>
<div>first</div>
</li><li>
<div>first</div>
</li><li>
<div>first</div>
</li><li>
<div>first</div>
</li>
</ul>
Example here.
As mentioned by other answers and comments, the best practice for solving this is to add font-size: 0; to the parent element:
ul {
font-size: 0;
}
ul li {
font-size: 14px;
display: inline-block;
}
This is better for HTML readability (avoiding running the tags together etc). The spacing effect is because of the font's spacing setting, so you must reset it for the inlined elements and set it again for the content within.
Solution:
ul {
font-size: 0;
}
ul li {
font-size: 14px;
display: inline-block;
}
You must set parent font size to 0
I would add the CSS property of float left as seen below. That gets rid of the extra space.
ul li {
float:left;
}
Actually, this is not specific to display:inline-block, but also applies to display:inline. Thus, in addition to David Horák's solution, this also works:
ul {
font-size: 0;
}
ul li {
font-size: 14px;
display: inline;
}
Another solution, similar to Gerbus' solution, but this also works with relative font sizing.
ul {
letter-spacing: -1em; /* Effectively collapses white-space */
}
ul li {
display: inline;
letter-spacing: normal; /* Reset letter-spacing to normal value */
}
I had the same problem, when I used a inline-block on my menu I had the space between each "li" I found a simple solution, I don't remember where I found it, anyway here is what I did.
<li>Home</li><!---->
<li>News</li><!---->
<li>About Us</li><!---->
<li>Contact Us</li>
You add a comment sign between each end of, and start of : "li"
Then the horizontal space disappear.
Hope that answer to the question
Thanks
Even if its not inline-block based, this solution might worth consideration (allows nearly same formatting control from upper levels).
ul {
display: table;
}
ul li {
display: table-cell;
}
IE8+ & major browsers compatible
Relative/fixed font-size independent
HTML code formatting independent (no need to glue </li><li>)
just remove the breaks between li's in your html code...
make the li's in one line only..