I want to add space before bullet points . My requirement like
This is paragraph1
The text line one
The text line two
This is paragraph 2
The text line one
The text line two
Any help will be appreciated.
Try setting margin to li
li{
margin-left: 20px;
}
JSfiddle here
There is spacing before bullet points by default. If there isn’t, you are probably using a “Reset CSS” of some kind.
To set the spacing to a desired value, set padding-left and margin-left of both ul and li elements to zero and then set one of them to the desired value.
CSS:
li {
margin-left:1em;
}
You can set CSS to li as per your requirement.
HTML Code
<p>This is my paragraph1</p>
<ul><li> List One </li>
<li> List Two </li>
<li> List Three </li>
</ul>
<p>This is my paragraph 2</p>
<ul><li> List One </li>
<li> List Two </li>
<li> List Three </li>
</ul>
CSS
li {
margin-left:1em;
}
JSFiddel
apply margin-left to ul
Working Fiddle example is here:
Code:
[http://jsfiddle.net/Sharan_thethy/MNaUn/][1]
I hope this will help you
Related
please see html validator error output in screenshot.
ul{
display: inline;
}
<ul>hi
<li>
1234
</li>
<li>
5678
</li>
</ul>
<ul>hello
<li>
abcdef
</li>
<li>
ghijkl
</li>
</ul>
question:the ul items(hi,hello) in above css code moved a couple of places to the right if I used the css display:inline tag . But They do not get moved if I execute with a css ul tag having no display:inline value..please explain. and second question why have the circle markers disappeared ?
li elements have a display value equal to list-item and following the specification they generate a block box so you end having a block element inside and inline element.
The above behavior is also defined in the specification and leads to the result you get. More detail: Is it wrong to change a block element to inline with CSS if it contains another block element?
why have the circle markers disappeared ?
It's still there but hidden on the left because the default behavior is list-style-position: outside
ul{
display: inline;
}
li {
margin-left: 20px;
}
<ul>hi
<li>
1234
</li>
<li>
5678
</li>
</ul>
<ul>hello
<li>
abcdef
</li>
<li>
ghijkl
</li>
</ul>
ul gets a default padding-left applied from the user agent stylesheet, 40px or something.
With an inline element, padding-left works only before the first line of content, and padding-right only after the last line.
Make it inline-block instead, if you want that padding applied to the whole element.
Because the inline value of the display property is something that makes the elements inside to behaves inline.
That means you have not much options to position and move them.
The inline value is most useful for a text paragraphs to wrap theentire paragraph. Where you would like the text to position in a couple of lines one below another.
Weird problem that <ol> list item number isn't aligned with its content. See live page or screenshots: 1, 2
See the line numbers of the ordered list isn't aligned with its content. They are all down below when the screen is wide and up in the air when the screen is narrow.
Thought it's something wrong with the CSS since both Chrome and Firefox render the list this way, but didn't find any weird styles at all in the stylesheets. Is this normal behavior of HTML5 <ol>? How can I make it the item numbers are aligned to the top line of its corresponding content, both wide and narrow screen?
This is because you have applied display:inline-block to the <a> tags. Just apply display:block to the <a> tags
Stack Snippet
a {
display: block;
margin-bottom: 10px;
}
<ol>
<li> <a>http://n3.datasn.io/data/api/v1/n3_lyz/cars_and_powersports_vehicle_and_motorcycle_and_boat_14/atv/list/?app=html-bunker</a>
</li>
<li> <a>http://n3.datasn.io/data/api/v1/n3_lyz/cars_and_powersports_vehicle_and_motorcycle_and_boat_14/atv/list/?app=html-bunker</a>
</li>
<li> <a>http://n3.datasn.io/data/api/v1/n3_lyz/cars_and_powersports_vehicle_and_motorcycle_and_boat_14/atv/list/?app=html-bunker</a>
</li>
<li> <a>http://n3.datasn.io/data/api/v1/n3_lyz/cars_and_powersports_vehicle_and_motorcycle_and_boat_14/atv/list/?app=html-bunker</a>
</li>
</ol>
It has to do with the CSS rule for .links-4 a. It sets display: inline-block;. If you change it to display: inline, it'll be fine.
Notice the white border list elements each have a space in between, I cannot figure out where this space is coming from... have tried removing paddings and margins please help.
Link to code: http://codepen.io/anon/pen/rBxwp/
You should remove any white-space between the inline-block elements you have. inline-block elements are like inline elements and if you add any white-space between them it will normally show.
Look at this example http://codepen.io/anon/pen/spbtv/
You can have white-space inside your inline-block elements to increase readability.
<ul>
<li>
TEST1 <span>2</span>
</li><li>
TEST2 <span>2</span>
</li><li>
TEST3 <span>2</span>
</li><li>
TEST4 <span>2</span>
</li>
</ul>
You can also handle this without having to remove any whitespaces:
ul {
...
font-size: 0;
}
header nav li {
...
font-size: 14px;
}
Mathias is correct. You need to remove the whitespace between the LI items in your markup.
You have:
<li>TEST1 <span>2</span></li>
<li>TEST2 <span>2</span></li>
You need to format it as such:
<li>TEST1 <span>2</span></li><li>TEST2 <span>2</span></li>
The issue is that you've told your LIs to be inline. As inline elements, white space will effect spacing.
To answer your question, you have white space between your <li> tags. White space can affect inline-block elements. So your code needs to be:
<header>
<div class="container">
<div class="col-lg-12 hidden-xs">
<nav>
<ul>
<li>TEST1 <span>2</span></li><li>TEST2 <span>2</span></li><li>TEST3 <span>2</span></li><li>TEST4 <span>2</span></li>
</ul>
</nav>
</div>
</div>
</header>
Notice that the </li> of the previous list item and the <li> of the next list item have no space between them.
However, once you fix this, you will also notice that the border is twice as thick between the elements as on the ends. This may be intentional, but I don't think it is. To fix this, you just remove the border-right style from the <a> tag and add this to your CSS:
header nav li:last-child a {
border-right: 1px solid white;
}
This selects the <a> inside the last <li> and adds a border-right to it.
DEMO
This is a common issue caused by line-breaks in code.
<li>TEST1 <span>2</span>
</li><li>TEST2 <span>2</span>
</li><li>TEST3 <span>2</span>
</li><li>TEST4 <span>2</span>
Here, the closing tag </li> of first list tag and starting <li> are together so browser sees that both are in the same line.
So whenever you see these unnecessary spaces, remove those line-breaks by joining the closing and the starting tags.
Hope this helps!
What CSS makes <a> tags show on a single line, rather than under each other?
Maybe have a link in <li> tag?
I believe you want:
a {
display: block;
}
edit
Anchors by default show inline, but the related CSS is:
a {
display: inline;
}
You could also use inline-block which gives you a bit more functionality (although some older browsers support it poorly).
If you want a link in a <li> tag:
<ul>
<li>
Link here.
</li>
</ul>
CSS:
li {
display:inline-block;
}
Example here
I created an example for you which answers your second question.
<p id="top">This is the top of the file</p>
<ul> Favourite sports
<li>Football</li>
<li>Tennis</li>
<li>Rugby</li>
</ul>
<p>This link goes to the top</p>
The tag li refers to list item. Links are written the same way in ordered and unordered lists.
I have a ul list which has a few single and some multi-line li text..
Now for the multi-line text, the 2nd line of text starts at a different indentation than the 1st line of text.
I want a very basic approach to fix this issue which should be cross-browser compatible.
Just to add, I want some space between the ul and a neighboring image (so kind of margin)
My HTML and CSS;
<div class="fl">
<div class="resDtp2"><img src="images/book1.gif"></div>
<ul class="resDtp2 txtSmall">
<li class="resDtpPad"><span>Some text Some text Some text</span></li>
<li class="resDtpPad"><span>Some text</span></li>
</ul>
</div>
div.resDtp1{float:none}
div.resDtp2{float:left}
ul li.resDtpPad{text-align: left;}
You can give the li's a padding-left, that should do it