HTML List bullet jump to second line when it's line brake.
For expmple:
<ul>
<li>First list</li>
<li>Second list continue to second line.</li>
</ul>
First list
Second list continue to
second line.
How do I make the second list bullet to show up, using CSS?
NOTE: This is only happen when there is not enough space. For example when I view this on my iPhone it's like this. But on my PC looks normal.
If you're okay adding some extra markup, your best bet is to try to utilize the vertical-align property.
<ul>
<li><em></em><span>First list</span></li>
<li><em></em><span>Second list continue to second line.</span></li>
</ul>
CSS:
li em {
height: 100%;
vertical-align: middle;
display: inline-block; }
li span {
vertical-align: middle;
display: inline-block; }
Preview: http://jsfiddle.net/Wexcode/jB9Ad/
From what I have collected of your Question... You want something along the lines of displaying another "INDENTED" Unordered/Ordered List within that list... Well without using Line Breaks or CSS you could do this...
<ul>
<li>This is an item within the parent List.
<ul>
<li>This is a child list item, and the beginning of a new list.</li>
</ul>
</li>
<li>This is the second item within the parent list</li>
</ul>
That should help! :)
if all you care about is iPhone or WebKit set your li's to overflow:ellipsis; firefox nightlies may support it, but i know ff hasn't had it for a bit.
Related
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.
I'd like to create a list where each successive element has a greater margin than the previous one.
You can see what I want to achieve here: Example with fixed margin
So, let's take a simple list
<ul>
<li class="a">First element</li>
<li class="b">Second element</li>
<li class="c">Third element</li>
</ul>
I could give each element a class and set an increased margin to each class, like this
.a {
margin-left: 10px;
}
.b {
margin-left: 20px;
}
.c {
margin-left: 30px;
}
I'd like to be able to do that, however, without specifying directly the margin for each element, using instead a fixed increment that is automatically applied to each additional list element
Is there any intelligent way to achieve this with css?
Obvious answer first, this is what heirarchy is for, so most will recommend using nested uls:
<ul>
<li>001
<ul>
<li>002
<ul>
<li>003</li>
</ul>
</li>
</ul>
</li>
</ul>
Otherwise, I think you will have to turn to using JS or CSS calc if it has enough support for your needs.
I want to have wrapped contents automatically indent according to the first line. In order to do this I have used the following HTML and CSS code:
li {
padding-left: 10px;
text-indent: 10px;
}
.Slides {
width: 20em; //Showing wrap-around
}
<div class="Slides">
<div>
<h1>My heading</h1>
</div>
<div>
<li>First line</li>
</div>
<div>
<li>Second line which is very long, must have the same indentation (when wrapped to next line) as that of the first line.</li>
</div>
</div>
This gives me a nice indentation in case of multiple lines but only in webkit browsers. In Firefox and IE the contents are overlapping with the bullet point.
In order to check for this I have also tried wrapping the contents inside li elements. But this again gives me very different layout across browser. How can I achieve a consistent behaviour in all browsers?
Please try this. I wrapped li tags in ul. sometimes it creates issue if li's are not wrapped properly in ul's
<div class="Slides">
<div>
<h1>My heading</h1>
</div>
<div>
<ul>
<li>First line</li>
</ul>
</div>
<div>
<ul>
<li>Second line which is very long, must have the same indentation (when wrapped to next line) as that of the first line.</li>
</ul>
</div>
</div>
Dont use the <li> element at all. Just use plain old <p> elements and style the indent purely with css. You can even use a glyphcon or css to add the bullet point back if youd like. Also in css if something works in one browser and not others, try adding vendor prefixes. Sometimes a browser dev adds features in beta, so you have to ad the vendor prefix to use them.
I am using <ul>'s and I would like to have the circles (just the circles or disks) the start off each <li> appear bigger. Is there an easy way to do this with CSS?
How disc, circle and other list style types are rendered is up to the browser to decide, and is fixed on a browser-by-browser basis. Even different versions of IE draw them at different sizes.
You can't control this without altering the markup (see Marty Wallace's answer) unless you make your own circle images to use with list-style-image instead. (Still provide list-style-type as a fallback for when images can't load, etc.)
You could just put a <span> with a smaller font size around the content of the <li>.
HTML:
<ul>
<li><span>list item</span></li>
<li><span>list item</span></li>
<li><span>list item</span></li>
</ul>
CSS:
ul
{
font-size: 20px;
}
li > span
{
font-size: 10px;
}
as answered by #BoltClock, you should use custom images like shown below. Assume that you have ball.gif in the current directory (which can be bigger in your case).
<UL STYLE="list-style-image: url(ball.gif)">
<LI>Bullet 1</LI>
<LI>Bullet 2</LI>
</UL>
Given the following markup:
<ul>
<li>apple</li>
<li class="highlight">orange</li>
<li>pear</li>
</ul>
Both the uls and the lis widths appear to be 100%. If I apply a background-color to the list item, the highlight stretches the full width of the page.
I only want the background highlight to stretch as wide as the widest item (with maybe some padding). How do I constrain the lis (or perhaps the uls) width to the width of the widest item?
Adding ul {float: left; } style will force your list into preferred width, which is what you want.
Problem is, you should make sure next element goes below the list, as it did before. Clearing should take care of that.
Can you do it like this?
<ul>
<li>apple</li>
<li><span class="highlight">orange</span></li>
<li>pear</li>
</ul>
Exactly as BoltBait said, wrap your text in an inline element, such as span and give that the class.
<ul>
<li>apple</li>
<li><span class="highlight">orange</span></li>
<li>pear</li>
</ul>
My extra 2 cents is that if you don't have access to change the HTML, you can do it using Javascript. In jQuery:
$('li.highlight').wrapInner("<span></span>");
and use the CSS:
li.highlight span { background-color: #f0f; }
edit: after re-reading your question, can you clarify: do you want the highlight to only go as wide as the element which is highlighted, or as wide as the widest element in the list? eg:
- short
- items ********************
- here
- and then a really long one
...where the asterisks represent the highlighting. If so, then buti-oxa's answer is the easiest way. just be careful with clearing your floats.
Adding style="float: left;" to ul will cause the ul to only stretch as wide as the widest item. However, the next element will be placed to the right of it. Adding style="clear: left;" to the next element will place the next element after the ul.
Try it out
See documentation on float and clear.
The best way of going about solving this without messing up the style of your existing layout, is by wrapping the ul and li in a div with display: inline-block
<div id='dropdown_tab' style='display: inline-block'>dropdown
<ul id='dropdown_menu' style='display: none'>
<li>optoin 1</li>
<li>optoin 2</li>
<li id='option_3'>optoin 3
<ul id='dropdown_menu2' style='display: none'>
<li>second 1</li>
<li>second 2</li>
<li>second 3</li>
</ul>
</li>
</ul>
</div>
None of the existing answers provide the correct solution, unfortunately. They range from abusing the float property to totally restructuring your HTML, something which often isn't feasible.
The <ul> element has display: block; as its default display property, causing the width to fill 100% of its container.
To change this aspect and still retain all the other default properties of how a <ul> is displayed (e.g. avoid issues with float from other answers), apply display: inline-block; to the list:
ul {
display: inline-block;
background-color: green;
}
.highlight {
background-color: orange; /* for demonstration */
padding: 15px; /* for demonstration */
}
<ul>
<li>apple</li>
<li class="highlight">orange</li>
<li>pear</li>
<li>banana</li>
</ul>