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'.
Related
I want to remove all indentation from ul. I tried setting margin, padding, text-indent to 0, but no avail. Seems that setting text-indent to a negative number does the trick - but is that really the only way to remove the indentation?
Set the list style and left padding to nothing.
ul {
list-style: none;
padding-left: 0;
}
ul {
list-style: none;
padding-left: 0;
}
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
To maintain the bullets you can replace the list-style: none with list-style-position: inside or the shorthand list-style: inside:
ul {
list-style-position: inside;
padding-left: 0;
}
ul {
list-style-position: inside;
padding-left: 0;
}
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
My preferred solution to remove <ul> indentation is a simple CSS one-liner:
ul { padding-left: 1.2em; }
<p>A leading line of paragraph text</p>
<ul>
<li>Bullet points align with paragraph text above.</li>
<li>Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. </li>
<li>List item 3</li>
</ul>
<p>A trailing line of paragraph text</p>
This solution is not only lightweight, but has multiple advantages:
It nicely left-aligns <ul>'s bullet points to surrounding normal paragraph text (= indenting of <ul> removed).
The text blocks within the <li> elements remain correctly indented if they wrap around into multiple lines.
Legacy info:
For IE versions 8 and below you must use margin-left instead:
ul { margin-left: 1.2em; }
Add this to your CSS:
ul { list-style-position: inside; }
This will place the li elements in the same indent as other paragraphs and text.
Ref: http://www.w3schools.com/cssref/pr_list-style-position.asp
display:table-row; will also get rid of the indentation but will remove the bullets.
Remove the padding:
padding-left: 0;
Can you provide a link ?
thanks
I can take a look
Most likely your css selector isnt strong enough or can you try
padding:0!important;
Live demo: https://jsfiddle.net/h8uxmoj4/
ol, ul {
padding-left: 0;
}
li {
list-style: none;
padding-left: 1.25rem;
position: relative;
}
li::before {
left: 0;
position: absolute;
}
ol {
counter-reset: counter;
}
ol li::before {
content: counter(counter) ".";
counter-increment: counter;
}
ul li::before {
content: "●";
}
Since the original question is unclear about its requirements, I attempted to solve this problem within the guidelines set by other answers. In particular:
Align list bullets with outside paragraph text
Align multiple lines within the same list item
I also wanted a solution that didn't rely on browsers agreeing on how much padding to use. I've added an ordered list for completeness.
I have the same problem with a footer I'm trying to divide up. I found that this worked for me by trying few of above suggestions combined:
footer div ul {
list-style-position: inside;
padding-left: 0;
}
This seems to keep it to the left under my h1 and the bullet points inside the div rather than outside to the left.
Doing this inline, I set the margin to 0 (ul style="margin:0px"). The bullets align with paragraph with no overhang.
The following worked for me.
In Chrome, Edge and Firefox (which needs special treatment).
Bullets are kept and are on the same line with surrounding paragraphs.
ul {
padding-left: 0;
margin-left: 17px;
}
/* Different value for Firefox */
#-moz-document url-prefix() {
ul {
margin-left: 14px;
}
}
JSFiddle
This is the problem:
This is my HTML:
<ol class="steps">
<li>
Select elements appear properly
<br>
<select>
</select>
</li>
<li>
Textareas appear properly
<br>
<textarea></textarea>
</li>
<li>
But text that spans multiple lines is displayed with high gap between first two lines. Try also adjusting the width of the output window to really small to see the effect.
</li>
</ol>
I am using custom, ordered bullet lists. I tried replacing the textnodes with <span>s to no avail. Replacing with <p> added a weird line break between the li::before and <p>.
How to fix this problem?
UPDATE: this is the fixed fiddle. I had to remove the br style rule and use position absolute.
The second line of <li> text has to make room for the green counter that has been placed before the <li>. You can remove that space by adding position: absolute to .steps li:before but you'll have to fiddle the positioning.
The line height of your bullet pseudo elements causes this problem.
I tried replacing the textnodes with <span>s to no avail
Try again, and make those spans dislay:inline-block as well.
Throw in some vertical-align:top for both the bullets and text spans. If necessary, further adjust the horizontal adjustment of the bullets using relative positioning and an appropriate top value.
Edit: Another approach, and one I usually favor, is giving the li elements the appropriate margin or padding to the left, and then either float the bullets or position them absolutely, so that they end up in that space "reserved" by the margin/padding; moved to the left using a negative margin-left (float) or left (absolute positioning.)
Pen
.steps {
counter-reset: li-counter;
list-style-type: none;
margin-left: 0;
padding-left: 10px;
}
.steps li {
counter-increment: li-counter;
padding-left: 35px;
position:relative;
}
.steps li p {
padding-left: 60px;
position: absolute;
top: 0;
left: -14px;
}
.steps li:before {
display: inline-block;
content: counter(li-counter);
height: 30px;
width: 30px;
border-radius: 50%;
background: #20ED89;
color: white;
text-align: center;
line-height: 30px;
margin: 10px;
margin-left: -35px;
}
.steps br {
content: " ";
display: block;
margin: -10px;
}
<ol class="steps">
<li>
Select elements appear properly
<br>
<select>
</select>
</li>
<li>
Textareas appear properly
<br>
<textarea></textarea>
</li>
<li><p>But text that spans multiple lines is displayed with high gap between first two lines. Try also adjusting the width of the output window to really small to see the effect.</p>
</li>
</ol>
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
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!
I want to remove all indentation from ul. I tried setting margin, padding, text-indent to 0, but no avail. Seems that setting text-indent to a negative number does the trick - but is that really the only way to remove the indentation?
Set the list style and left padding to nothing.
ul {
list-style: none;
padding-left: 0;
}
ul {
list-style: none;
padding-left: 0;
}
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
To maintain the bullets you can replace the list-style: none with list-style-position: inside or the shorthand list-style: inside:
ul {
list-style-position: inside;
padding-left: 0;
}
ul {
list-style-position: inside;
padding-left: 0;
}
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
My preferred solution to remove <ul> indentation is a simple CSS one-liner:
ul { padding-left: 1.2em; }
<p>A leading line of paragraph text</p>
<ul>
<li>Bullet points align with paragraph text above.</li>
<li>Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. </li>
<li>List item 3</li>
</ul>
<p>A trailing line of paragraph text</p>
This solution is not only lightweight, but has multiple advantages:
It nicely left-aligns <ul>'s bullet points to surrounding normal paragraph text (= indenting of <ul> removed).
The text blocks within the <li> elements remain correctly indented if they wrap around into multiple lines.
Legacy info:
For IE versions 8 and below you must use margin-left instead:
ul { margin-left: 1.2em; }
Add this to your CSS:
ul { list-style-position: inside; }
This will place the li elements in the same indent as other paragraphs and text.
Ref: http://www.w3schools.com/cssref/pr_list-style-position.asp
display:table-row; will also get rid of the indentation but will remove the bullets.
Remove the padding:
padding-left: 0;
Can you provide a link ?
thanks
I can take a look
Most likely your css selector isnt strong enough or can you try
padding:0!important;
Live demo: https://jsfiddle.net/h8uxmoj4/
ol, ul {
padding-left: 0;
}
li {
list-style: none;
padding-left: 1.25rem;
position: relative;
}
li::before {
left: 0;
position: absolute;
}
ol {
counter-reset: counter;
}
ol li::before {
content: counter(counter) ".";
counter-increment: counter;
}
ul li::before {
content: "●";
}
Since the original question is unclear about its requirements, I attempted to solve this problem within the guidelines set by other answers. In particular:
Align list bullets with outside paragraph text
Align multiple lines within the same list item
I also wanted a solution that didn't rely on browsers agreeing on how much padding to use. I've added an ordered list for completeness.
I have the same problem with a footer I'm trying to divide up. I found that this worked for me by trying few of above suggestions combined:
footer div ul {
list-style-position: inside;
padding-left: 0;
}
This seems to keep it to the left under my h1 and the bullet points inside the div rather than outside to the left.
Doing this inline, I set the margin to 0 (ul style="margin:0px"). The bullets align with paragraph with no overhang.
The following worked for me.
In Chrome, Edge and Firefox (which needs special treatment).
Bullets are kept and are on the same line with surrounding paragraphs.
ul {
padding-left: 0;
margin-left: 17px;
}
/* Different value for Firefox */
#-moz-document url-prefix() {
ul {
margin-left: 14px;
}
}