Trying to break up list items dynamically - html

I'm trying to fill an unordered vertical list that continues on the next line every time the list reaches the length limit. But instead of simply displaying the next list item on the next line I want the list item to break and continue like this:
I don't want to do this with columns, rather that it breaks dynamically.

Maybe something like this to make the list horizontal and to create your own custom list-style-type?
Code:
<style>
ul {
list-style-type: none;
text-align: center;
width: 450px;
}
li {
display: inline;
}
li:before {
content: "\2022";
margin-right: 2px;
}
</style>
<ul>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
</ul>

How about giving your <ul> a set max-width, then give your <li> display: inline; so they aren't block elements anymore and wrap like you want. However list-style-type will not work on the li's anymore because they are inline elements. You can still get your red bullet points working with background images, looks like you might be already doing this.
ul {
max-width: 220px;
list-style-type: disc;
}
ul li {
display: inline;
}
<ul>
<li>Hey there this is a pretty long sentence</li>
<li>Hey there this is a pretty long sentence</li>
<li>Hey there this is a pretty long sentence</li>
<li>Hey there this is a pretty long sentence</li>
</ul>

You can use css to change the way of items are listed.
Ex:
ul {
width: 250px;
display: inline-block;
}
li {
float: left;
margin-left: 20px;
}
<html>
<body>
<ul>
<li>item 1</li>
<li>item 1 item 2</li>
<li>item 1 item 2 item 3</li>
<li>item n</li>
</ul>
</body>
</html>

Related

HTML Complex list item with number+letter

How to accomplish this:
1. lorem ipsum
2. lorem ipsum
2a. lorem ipsum
3. lorem ipsum
4a. lorem ipsum
html: (I cannot expose the text so I'm using lorem)
<ol>
<li>lorem ipsum 1</li> <--- 1
<li>lorem ipsum 2 </li> <--- 2
<li class="number-alpha">lorem ipsum 2a</li> <--- 2a
<li>lorem ipsum 3</li> <--- 3
<li class="number-alpha">lorem ipsum 4a</li> <--- 2a
</ol>
as you can see the 2a is a different situation then the 4a, but I need to solve both situations in one ordered list and use CSS instead of JS or Jquery. The reason why you have 2 and 2a is because 2a is an exceptional message of 2 for a different user. the reason why its 4a instead of 3a is because 4a isn't an exceptional message but its information for a different user (it needs to be shown in the same list)
this is what I came with (pretty proud of this one I gotta admit) :
ul {
counter-reset:yourCounter;
}
ul li {
list-style:none;
}
ul li:not(.sub) {
counter-increment:yourCounter;
}
ul li:before {
content:counter(yourCounter) ". ";
}
ul li.sub:before, ul li.subskip:before {
content:counter(yourCounter) "a. ";
}
<ul>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li class="sub">lorem ipsum</li>
<li>lorem ipsum</li>
<li class="subskip">lorem ipsum</li>
</ul>

is it possible to use different list specifier in li tag

I'm using ✈ as list list specifier, it looks nice for my project when it is in single line , but for mobile view (in multiple line of a list) it looks bit ugly . do you have some remedies .. thank you
Actual view :
✈ this is what my problem with li tags please give me some remedies. ✈ this is what my problem with li tags please give me some remedies.
Expected view:
✈ This looks awesome to display     is there anyway to do this. ✈ This looks awesome to display     is there anyway to do this.
There are couple of different ways to achieve this.
Option 1. CSS Tables
ul {
list-style-type: none;
display: table;
width: 200px;
padding: 0;
}
li {
display: table-row;
}
li:before {
content: '✈ ';
padding-right: 5px;
display: table-cell;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
</ul>
Option 2. absolute and relative positions
ul {
list-style-type: none;
width: 200px;
padding: 0;
}
li {
position: relative;
margin-left: 25px;
}
li:before {
content: '✈ ';
position: absolute;
left: -20px;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
</ul>
Option 3. Flexbox
ul {
list-style-type: none;
width: 200px;
padding: 0;
}
li {
display: flex;
}
li:before {
content: '✈ ';
margin-right: 5px;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
</ul>
I found a simple solution to use table(without border) with bootstrap.
<style>
table tr td{
vertical-align:top;
text-align:left;
}
</style>
<table>
<tr>
<td>✈ </td>
<td>This looks awesome to display</td>
</tr>
<tr>
<td>✈ </td>
<td>This looks awesome to display</td>
</tr>
</table>

CSS Columns break border between columns

Please reference this fiddle for a demo for my question.
TL;DR: I'm looking for a way for the purple border to go as high as the green border (so that the purple border masks the green by overlap). I'm looking for any creative solution, hacks included.
More specifically, for this application in the <section> box there is a <ul> which is populated dynamically varying amounts of items. The design approved by the client has a space in the horizontal top-border between the columns. Because the amount of items in the list varies I'm avoiding using <div>s with floats for columns. I can't find any CSS rules for this and all the other articles I've read are about how to create vertical borders (which I have made purple in the demo for an easy visual), but I can't determine if it's possible to make those borders overlap the parent's outer border.
Edited for clarity 2015-09-27 17:29 UTC-5
Using the "column-rules" property familly doesn't appear to offer what you need.
In my opinion, I would do something like the fiddle below. I agree, it's not very optimised for semantic, and it will not works alone for managing the columns number.
Maybe you can make something in PHP to change the columns number regarding the number of items before generationg your page.
If you're not working with PHP, a little JS function can do the formatting for you :)
/*.list-group > li {
list-style: none;
}
section.row > div {
margin: 0 !important;
display: inline-block;
border: solid 4px #88d0cd;
border-right: solid 4px #FF00FF;
}
section > div:last-child {
border-left: none;
}
section > div:not(:last-child) {
border-left: none;
}*/
.row {
width: 90%;
margin: auto;
}
.row > .col {
float : left;
width: 30%;
}
.col > ul {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
padding: 1em 0 1em 2em;
border-top: solid 4px #88d0cd;
border-bottom: solid 4px #88d0cd;
}
.col:first-child {
border-left: solid 4px #88d0cd;
}
.col:last-child {
border-right: solid 4px #88d0cd;
}
.col:not(:last-child) {
border-right: solid 4px #FF00FF;
}
.col:not(:last-child) > ul {
border-right: none;
}
<html>
<head>
</head>
<body>
<section class="row">
<div class="col">
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
<div class="col">
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
<div class="col">
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
</section>
</body>
</html>

Bullets center with unordered list

Does anyone know the CSS that makes the bullet point sit at the top of a multi-line bulleted list? For some reason with the template that I am using the bullet point centers to the left instead of simply sitting next to the first word if I have more than one line of text.
Set the list style position to inside the list item, see this demo fiddle.
CSS:
ul {
list-style-position: inside;
}
This is not an answer per-se but it may give others an insight to a similar visual situation with a different set of circumstances.
I had the same issue, like so:
My HTML looked like this:
<ul>
<li>
Link with several lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, commodi!
<p>Lorem ipsum dolor sit amet.</p>
</li>
<li>
Link with several lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, commodi!
<p>Lorem ipsum dolor sit amet.</p>
</li>
</ul>
And the CSS like this:
a {
display: inline-block;
vertical-align: middle;
}
See the offending part? The vertical-align: middle; declaration.
There are two solutions:
Solution 1
Remove the vertical-align: middle; declaration altogether.
Solution 2
Change the value: vertical-align: middle; to vertical-align: top;.
Result (as expected in the beginning):
Hope this helps.
You could do something like this:
(css)
li div:before
{
background-image:url('bullet.png');
}
(html)
<ul>
<li>
<div>
text<br />
more text
</div>
</li>
</ul>

How I can do a 2-column list in valid XHTML/CSS?

I have to build a page that has a list that fits in two columns. This list is generated by PHP so needs to be easy to add inputs.
It should like to:
* Lorem Ipsum * Lorem Ipsum
* Lorem Ipsum * Lorem Ipsum
* Lorem Ipsum * Lorem Ipsum
* Lorem Ipsum * Lorem Ipsum
* Lorem Ipsum * Lorem Ipsum
I would like to know if there is some way to generate this with a basic structure of <ul /> and <li />:
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
I need to support major browsers (and IE7, 6 not supported).
Thank you in advance!
I have found the solution to this:
ul li {
margin: 0;
padding: 0;
width: 50%;
float: left;
}
As explained here, a simple way to do that is to give an explicit width to the list and its items and have the items float to the left:
ul {
width: 700px;
}
li {
width: 200px;
float: left;
}
You're looking for the CSS3 multicolumn property. Unfortunately, unlike a lot of the cool features that are provided in the CSS3 specs, hardly any browser supports this as of yet. There is a javascript available though that can make it work in most browsers:
http://www.alistapart.com/articles/css3multicolumn/