I have below HTML in my web page:
Forum
<ul>
<li> Stack</li>
<li> OverFlow</li>
</ul>
And as you could see below, I get the items listed perfectly, but there is a fixed gap between <UL> and <LI> elements.
Is there a way, I can reduce this gap? i.e. gap between "Forum" and "Stack" text in attached screen?
The gap does not exist between UL and LI elements, but between the Forum text and the UL element. Most browsers define a default margin around certain elements, like the UL.
You get rid of it with CSS:
ul { margin: 0; }
or if you just want to reduce it, for example this one will set 0 margin for horizontal, 5px for vertical:
ul { margin: 5px 0; }
Try this (don't know if it's the problem with you):
<ul><li>
your first li element </li><li>
your second li element</li>
</ul>
There are spaces that you can't avoid on HTML code if you don't "avoid" it, let's say.
Take a look here.
In addition to kapa's comment, if you enter a negative value for the margin it will reduce the gap.
In css:
ul { margin:-20px;}
Yes, you can use CSS. In your CSS, specify the margin or padding properties to adjust the spacing between your LI and UL elements.
LI
{
margin: 0px;
}
This will decrease the vertical distance, but not the horizontal.
ul { margin:-15px 0;}
It is a combination of Andrew and kapa's.
Here's how it looks.
Related
I am trying to remove the indentation and bullets from a bulleted list using CSS. Here is what I am doing:
.entry-content ul{
list-style-type:none;
padding:0;}
The bullet points are removed from the list, but the indentation is not fixed. Here is the HTML:
<div class="entry-content">
<ul class=wp-block-categories wp-block-categories-list">
<li class="cat-item cat-item-8">Advice
</li>
</ul>
</div>
Here is an image before I apply the CSS:
https://imgur.com/Sw31pHJ
Here is an image after I apply the CSS:
https://imgur.com/Utnt5vI
Does anyone know why the indentation isn't being removed? I am doing this in wordpress.
You have an error in your HTML.
<ul class=:wp-block-categories wp-block-categories-list">
should be
<ul class="wp-block-categories wp-block-categories-list">
As for your CSS, one of these is the most likely:
The li may have a margin as well. try .entry-content ul li { margin-left: 0; }
Your selector isn't specific enough, try .entry-content ul.wp-block-categories-list instead
Your ul may have margin instead of padding (doubtful)
You can try and diagnose these with DevTools/your browsers inspector, it will show you all of the positions/margins/paddings and everything related to the element's bounding box:
You likely also need to apply:
.entry-content ul li {
margin-left: -20px;
}
The exact amount of margin will differ based on the size of your font, but 20px is the default.
html
<ul class="social">
<li><a class="html5" href="#html5"></a></li>
<li><a class="twitter" href="#twitter"></a></li>
<li><a class="facebook" href="#facebook"></a></li>
<ul>
Everything works, but not fitted to margin? I need it flush like the rest of my page...any advice?
css
.social ul
{
list-style-type:none;
margin:0;
padding:0;
}
.social li
{
display: inline-block;
}
In the CSS, you are trying to set margin and padding to "0" but since your path is wrong
-> .social ul
I think it should be:
-> ul.social
In the fiddle the <ul> still has the default 40px of left-padding and 16px of top/bottom margin, so just add margin: 0; padding: 0; to the unordered list. Every browser adds this padding/margin to lists - I'd suggest using a CSS reset, so you can explicitly reset the default browser styling for each element. Look at this for more info
Secondly inline-block elements are white-space dependent so if you comment out, or delete the white-space in your mark-up (between the <li>) the horizontal space between the images will be reduced.
Edit: It does display inline horizontally .. the reason why margin: 0; padding: 0; didn't take effect is because .social ul implies the unordered list is a descendant of some element with the class .social when it isn't, so the default padding/margin remained.
<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>
I've been trying to get this horizontal navigation sorted for the past few hours now and nothing is working. I've tried reset.css stylesheets, *{padding: 0; margin: 0) etc. and I still have gaps inbetween my image links.
You see, the navigation is made up of an unordered list of image links displayed inline, but there are gaps in between each image, left, right, top and bottom and I can't see why. It's the same in all browsers.
Here is a link to the page, and so source: Beansheaf Temporary
Link to css: http://pentathlongb-yorkshire.co.uk/tomsmith/Beansheaf/styles/fund2.css
The rest of the site is obviously still not done, it's just the navigation I'm worried about right now.
To avoid floating the navigation lis, you've got -at least- two options to remove the spaces between inline elements.
<ul>
<li><img src="../hotel.jpg" /></li
><li><img src="../foodDrink.jpg" /></li
><li><img src="../meetingsConferences.jpg" /></li>
</ul>
Note that the closing </li> tag is closed on the subsequent line (except for the last one), which is valid and maintains readability (for me, at least).
The other option is slightly messier
<ul>
<li><img src="../hotel.jpg" /></li><!--
--><li><img src="../foodDrink.jpg" /></li><!--
--><li><img src="../meetingsConferences.jpg" /></li>
</ul>
And just uses html comments <!-- ... --> to comment-out the spaces that would otherwise be collapsed into a single space.
I do wish there was some way of specifying (for example):
ul li img {whitespace: none-between; }
Another approach, avoiding floats, is to set the font-size on the container to 0, and then re-set it back up for the LIs, like this:
#mainNav
{ font-size: 0}
#mainNav li
{
display: inline;
list-style-type: none;
font-size: 1em
}
the gap below images links is due to the image being aligned with base text line by default, you can solve it simply declaring
li img {
vertical-align:bottom;
}
magic!
Try removing all spaces and line-breaks between the li elements.
Because you are displaying them inline, spaces in the HTML will act as if they were a space in inline text and cause a gap to be left when rendering.
Add
#mainNav li {
float:left;
}
to your CSS.
It is because a new line in an HTML document will be interpreted as a space in the printed content. Since all of your 'li' elements are on new lines, it is adding a space between each of them. Make sure you display them as block elements and float them to the left so they run evenly together.
You can float the list elements, then the white space doesn't interfer:
#mainNav li
{
float: left;
list-style-type: none;
}
I use the line-height attribute on the li tag to fix this.
ul li { line-height:0; }
Best solution to this comes from http://www.cssplay.co.uk/menus/centered.html. And quoting:
All we need to do is enclose the ul tag in an outer container that has a width of 100% and overflow set to hidden.
The <ul> tag is then styled with a relative position and floated left with a left position of 50%.
Finally the <li> tag is also styled with a relative position, floated left but this time with a right position of 50%.
...and that as they say is all that is needed.
if you are using xslt to show these element, you should make the following:
<xsl:template match=".//text()">
<xsl:value-of select="normalize-space(.)" />
</xsl:template>
I have an html file with an unordered list. I want to show the list items horizontally but still keep the bullets. No matter what I try, whenever I set the style to inline to meet the horizontal requirement I can't get the bullets to display.
The best option I saw in other answers was to use float:left;. Unfortunately, it doesn't work in IE7 which is a requirement here* — you still lose the bullet. I'm not really keen on using a background image either.
What I'm gonna do instead (that no one else suggested, hence the self-answer) is go with manually adding • to the my html, rather than styling this. It's less than ideal, but it's the most compatible option I found.
edit: *Current readers take note of the original post date. IE7 is unlikely to be a concern anymore.
I had the same problem, but only in Internet Explorer (I tested version 7) - not in Firefox 3 or Safari 3. Using the :before selector works for me:
ul.tabs li {
list-style: none;
float: left;
}
ul.tabs li:before {
content: '\ffed';
margin-right: 0.5em;
}
I'm using a square bullet here, but a normal bullet \2022 would work the same.
You could also use a background image on the <li> elements, with a padding to keep the text from overlapping it.
li {
background-image: url(i/bullet.gif) no-repeat center left;
padding-left: 20px;
display: inline;
}
The browser displays the bullets because the style property "display" is initially set to "list-item". Changing the display property to "inline" cancels all the special styles that list items get. You should be able to simulate it with the :before selector and the content property, but IE (at least through version 7) doesn't support them. Simulating it with a background image is probably the best cross-browser way to do it.
Keep them display blocked, give them a width and float left.
That will make them sit by side, which is like inline, and should maintain the list style.
It's actually a very simple fix. Add the following to the ul:
display:list-item;
Adding this CSS line will add the bullet points.
I was just messing around and I ran into the same issue with the same browser constraints; when I searched for an answer your post came up without the answer. This is probably too late to help you, but I thought for posterity's sake I should post it.
All I did to solve my problem was to embed another list with one item within each list item of the first list; like so...
HTML:
<div class="block-list">
<ul>
<li><ul><li>a</li></ul></li>
<li><ul><li>b</li></ul></li>
<li><ul><li>c</li></ul></li>
</ul>
</div>
CSS:
.block-list > ul > li { display: inline; float: left; }
IE7 Page:
o a o b o c
...it is a dumb solution, but it seems to work.
Did you try float: left on your <li/>? Something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
ul li {
float: left;
margin-left: 2em;
}
</style>
</head>
<body>
<ul>
<li>test</li>
<li>test2</li>
</ul>
</body>
</html>
I only tested Firefox 3.0.1, works there. The margin is set because else your bullet overlaps the previous item.
addition:
Be wary that when you float the items you remove them from the normal flow, which in turn causes the <ul/> to have no height. If you want to add a border or something, you'll get weird results.
One way to fix that is to add the following to your styles:
ul {
overflow: auto;
background: #f0f;
}
You may set <ul> as a CSS grid and <li> as cells to get similar layout to inline <li> and keep bullets easily:
ul {
display: grid;
grid-template-columns: 100px 100px 100px; /* or a smarter width setting */
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
You could use Character entities, see reference : http://dev.w3.org/html5/html-author/charref
<ul class="inline-list>
<li> • Your list item </li>
</ul>
In HTML, I added a break after each li like this:
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
And CSS:
li { float:left; }
Using float: left didn't work very well for me because it made the content box of the ul element 0 pixels high. Flexboxes worked better:
ul {
display: flex;
flex-wrap: wrap;
}
li {
margin-right: 24px;
}
You can use following code
li {
background-image: url(img.gif) no-repeat center left;
padding-left: 20px;
display: inline;
}