Is it possible to have each <li> resize its width based upon its content within the same <ul>?
It seems that every <li> is inherently stretched the match the largest width. How can I avoid this?
The <ul> is a vertical list with content varying between pictures and text.
inline-block is good, but presumably you still want the list items to stack without having to restyle them. In that case you can put the content inside a span or div and set that to inline style.
<html>
<body>
<ul>
<li><span>test</span></li>
<li><span>long test</span></li>
<li><span>longest test</span></li>
</ul>
</body>
</html>
with this css
li span
{
background-color:blue;
display:inline-block;
}
http://jsfiddle.net/WHSpW/
If you set "display" style of <li> to inline-block it should work as you want it.
If you float them they will take on the width of the content they contain.
li {float: left;}
You'll want to either float the containing ul or apply a clearfix to keep it from collapsing. Under IE6 you can use zoom:1 to trigger hasLayout on the ul.
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.
I am trying to add a div tag to show after the <ul>. But the div keeps showing alongside the list items.
I have tried putting the <ul> to block display, and even wrapping it with a block level div tag, but the other div element still shows along side. Can anyone please help me fix this? Thanks!
<section id="sub_nav_wrapper">
<div>
<ul class="unordered_style_nav">
<li class="sub_nav_list_item"> Job Overview </li>
<li class="sub_nav_list_item"> Job Description </li>
</ul>
</div>
<div class="job_info_container">
This element should show below the ul class above
</div>
I think you should use
#elementId {
clear: both;
}
to achieve the goal.
You could change the css of one or the other to dominate the row or just put a <br> tag underneath the first <div>.
This question seems to be asked freqeuently over the internet but I still can't find a solution.
I have this navigation bar (It switches between tabs using jQuery) which displays inline. I'm showing a background image on these and to make them more definitive I need to make them wider and higher.
<div id="tabs">
<ul id="tabs-nav-cont">
<li class="tabs-navs">Nav 1</div></li>
<li class="tabs-navs">Nav 2</div></li>
<li class="tabs-navs">Nav 3</div></li>
<li class="tabs-navs">Nav 4</li>
</ul>
</div>
The only way I can seem to do this is by reverting them back to block elements. Which is not what I want because they display vertically. So I tried putting divs in the anchors so I can size them up. However they seem to change them back to block elements too.
Im confused. Someone please help :)
Luckily you live in the year 2009, where inline-block is widely adopted through browsers: Cross browser inline-block.
If it's just for the height (and all the content of the lis fits each on one line), you'd like to go with line-height: 123px, which sets the height of an inline box to 123px (per line, that is).
Or, quite common, if the navigation is left-aligned, float them:
#nav li {
display: block;
float: left;
}
Cheers,
Because it was not 2009 when i first had to solve this :) i got the solution for firefox with following css class:
.ib { display: -moz-inline-block; display: inline-block;}
This is my generic inline-block class that i use where necessary...
Sinan.
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>