Get second line of bullet item to indent as first part - not underneath the bullet?
My take on this would be to include the bullet in another div and then wrap both divs in a container div.
.row2 { padding-left: 20px; overflow: hidden; max-width: 500px; }.red-square-5 { position:absolute; width:5px; height:5px; margin-top: 0.5em; background:#f00; }
<div class="container-div"> <div class="red-square-5"></div> <div class="row2"> Long long long long long long long long long long long long long long long long long long long long long long long long long title </div></div>
Second line in li starts under the bullet after CSS-reset
The li
tag has a property called list-style-position
. This makes your bullets inside or outside the list. On default, it’s set to inside
. That makes your text wrap around it. If you set it to outside
, the text of your li
tags will be aligned.
The downside of that is that your bullets won't be aligned with the text outside the ul
. If you want to align it with the other text you can use a margin.
ul li {
/*
* We want the bullets outside of the list,
* so the text is aligned. Now the actual bullet
* is outside of the list’s container
*/
list-style-position: outside;
/*
* Because the bullet is outside of the list’s
* container, indent the list entirely
*/
margin-left: 1em;
}
Edit 15th of March, 2014
Seeing people are still coming in from Google, I felt like the original answer could use some improvement
- Changed the code block to provide just the solution
- Changed the indentation unit to
em
’s - Each property is applied to the
ul
element - Good comments :)
How to keep indent for second line in ordered lists via CSS?
Update
This answer is outdated. You can do this a lot more simply, as pointed out in another answer below:
ul {
list-style-position: outside;
}
See https://www.w3schools.com/cssref/pr_list-style-position.asp
Original Answer
I'm surprised to see this hasn't been solved yet. You can make use of the browser's table layout algorithm (without using tables) like this:
ol {
counter-reset: foo;
display: table;
}
ol > li {
counter-increment: foo;
display: table-row;
}
ol > li::before {
content: counter(foo) ".";
display: table-cell; /* aha! */
text-align: right;
}
Demo: http://jsfiddle.net/4rnNK/1/
To make it work in IE8, use the legacy :before
notation with one colon.
Make second line of text text align under first line of text
Use flexbox
.block{
display:flex;
}
.mr-5{
margin-right:5px;
}
<div class="block">
<span class="mr-5">-</span>
<span>The fund or the employer gave a housing loan to the member and the member owes money on the loan. The fund or the employer gave a housing loan to the member and the member owes money on the loan.The fund or the employer gave a housing loan to the member and the member owes money on the loan.</span>
</div>
Related Topics
Force Ie Compatibility Mode Off Using Tags
Why Are My Css3 Media Queries Not Working on Mobile Devices
Css Vertical Alignment of Inline/Inline-Block Elements
How to Create Download Link in Html
Equal Width Flex Items Even After They Wrap
How to Make Css3 Rounded Corners Hide Overflow in Chrome/Opera
How to Replicate Background-Attachment Fixed on Ios
Best Practices & Considerations When Writing HTML Emails
Html5 Canvas Drawimage: How to Apply Antialiasing
Why Does HTML Require That Multiple Spaces Show Up as a Single Space in the Browser
Why Doesn't Table ≫ Tr ≫ Td Work When Using the Child Selector
Trouble With Parsing Table Data in Perl
Html Attribute With/Without Quotes