How do I remove text wrapping for the child elements in a dropdown?
JSFiddle with CSS here: http://jsfiddle.net/6Bqfn/4/
<ul>
<li>Home</li>
<li>Shop
<ul class="children">
<li>Longer Title</li>
<li>Short</li>
<li>Short</li>
</ul>
</li>
</ul>
I can't get the ul holding the children elements to resize to the size of the largest child li.
You need to include white-space:nowrap; in your css for the items you wish not to wrap:
ul.children li {
white-space:nowrap;
}
This will force all items to show up on a single line, and since all your widths are set to auto, it'll expand accordingly. I updated your jsFiddle as well.
You might try something like embedding a non-breaking space...
Longer Title
Related
I am using twitter bootstrap 2.3, I need the menu to be aligned to the right and also need the anchor to have a diferent widt, depending on the size of the world inside the anchor.
With next code, it's working, I leave empty columns with offset class, but not sure it there is a better to achieve the same result with another technique.
What I don't know how to do it is get the same "empty space separation" between each li, each li having a different width.
<div class="row_fluid">
<ul class="menu_logged span7 offset5">
<li class="span1 offset6"><a>Test</a></li>
<li class="span1"><a>Medium phrase</a></li>
<li class="span1">123</li>
<li class="span1">Hello World</li>
<li class="span2">Back</li>
</ul>
</div>
Any help?
Thank you
I have a vertical menu that needs some sub-menus. I can accomplish a decent-looking one just by putting a ul tag inside the link I want to expand and absolute-positioning it on hover, with display:none when it's inactive. But I'd like to make it slide out, and I haven't had any luck doing so. I have this basic markup:
<aside>
<ul>
<li>Link Text</li>
<li class="more">
Base
<ul>
<li></li>
</ul>
</li>
</aisde>
The aside tag is itself a secondary navigation menu, the main one is in my header. It is position:fixed for easy access while scrolling.
The ul tag inside of <li class="more"> is absolutely positioned, anchored to -1px on the top and width:154px, and on hover it becomes display:block; left:154px (of course, it is display:none when inactive). I have tried transitioning the left property, but it does not change anything, it acts as if my transition weren't even there.
I've got a list item with an image inside, for example:
<ul>
<li>
<img></img>
</li>
</ul>
The image does not take up the full width of the li.
How can I get the li width to shrink to the size of its containing image?
Do the height of images
<ul>
<li>
<img src="" width="xxx" height="xxx"></img>
</li>
</ul>
Live demo http://jsfiddle.net/CZqEc/
updated live demo http://jsfiddle.net/CZqEc/1/
If you set your li to display: inline, since li are blocks by default, the width would match the largest/widest element.
If <li> is display:block or similar (list-item also)
use li img{max-width:100%}
If <li> is display:inline-block or display:inline
you also need to set <li> width
or try
li
{
background:url('');
display: ;
background-size:xx xx;
}
I have
<footer class="meta">
<ul>
<li>3 notes</li>
<li>10 comments</li>
<li>3rd Feb 2011</li>
<li class="tags">
<ul>
<li>Tag name</li>
<li>Tag name</li>
</ul>
</li>
</ul>
</footer>
I am wondering why my last tag item goes to the next line
http://jiewmeng.kodingen.com/demos/folio-wip/index.html
You could try to enforce a one-line display, by adding:
li.tags,
li.tags > ul {
white-space: nowrap;
}
As others have pointed out, however, it drops to the next line due to width of the content being greater than the width of the parent element.
Having played around with this, it turns out that, for white-space: no-wrap; to work, you'd also need to use display: inline; (or display: inline-block;) on the li elements.
JS Fiddle demo.
The second tag name doesn't have space to float so it drops to the next line.
If you give the parent li more width it will stay on the same line
It's just overflowing since there's too much content to fit in the parent box. You can very easily check these things if you install firebug in your Firefox browser.
I have organized a menu. Its HTML is as follows:
<ul class="topmenu">
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
<ul>
This is a horizontal menu, so I have floated the list items to left to appear them in a horizontal line. I could have used display:inline to appear them in a single line, but since IE does not support it and I don't know any other way to do so, I used float:left;.
It's css is:
.topmenu {
list-style:none;
margin:0;
padding:0;
}
.topmenu li {
float:left;
}
This brings the menu in a perfect horizontal line, but the entire list is floated to the left. I want to bring the .topmenu to appear in the center of the document and keep the listitem inside it floated towards the left.
I found that this is achievable by defining width property of the .topmenu, but I dont want to fix its width as the list-items are dynamically generated and thus could increase and decrease.
Any one know of any solution?
Here is the solution without using width:)
display: inline is supported fine by all versions of IE. It's inline-block that isn't supported completely in IE 6 and 7 (source).
This should be solvable by simply switching to display: inline.