I doubt that this is achievable using just borders and “fiddling with margins” as others have suggested, at least I’ve had no luck in doing so. This solution uses CSS-generated content (:before and :after) to draw bullets and lines. It allows for a high degree of customization and it keeps the markup clean, but note … Read more
Several options here, first I’ll give you my normal practice when creating inline lists: <ul id=”navigation”> <li><a href=”#” title=””>Home</a></li> <li><a href=”#” title=””>Home</a></li> <li><a href=”#” title=””>Home</a></li> </ul> Then the CSS to make it function as you intend: #navigation li { display: inline; list-style: none; } #navigation li a, #navigation li a:link, #navigation li a:visited { display: … Read more
You’re using span6 and span2. Both of these classes are “float:left” meaning, if possible they will always try to sit next to each other. Twitter bootstrap is based on a 12 grid system. So you should generally always get the span**#** to add up to 12. E.g.: span4 + span4 + span4 OR span6 + … Read more
Interesting question! Here’s what I consider a “low-tech” solution with jQuery that does the trick: $(function() { var lastElement = false; $(“ul > li”).each(function() { if (lastElement && lastElement.offset().top != $(this).offset().top) { lastElement.addClass(“nobullet”); } lastElement = $(this); }).last().addClass(“nobullet”); }); The algorithm is not hard to follow, but here’s the idea: iterate over the elements, taking … Read more
The li element has an end tag (</li>), but it’s optional in some cases: An li element’s end tag may be omitted if the li element is immediately followed by another li element or if there is no more content in the parent element.
li { display: inline; } EDIT: I now realize why I felt strange answering with display: inline: because I usually use float: left myself instead, which is anthony-arnold’s answer (so to him goes my upvote!). Anyway, while either method will cause your lis to display in one line, inline elements and floated elements do behave … Read more
Here’s an example which works in all browsers. The pure CSS approach works in the real browsers (i.e. everything but IE6/7) and the jQuery code is to cover the unsupported. It’s in flavor of an SSCCE, you can just copy’n’paste’n’run it without changes. <!doctype html> <html lang=”en”> <head> <title>SO question 2729927</title> <script src=”http://code.jquery.com/jquery-latest.min.js”></script> <script> $(document).ready(function() … Read more
You can use pseudo-elements to include text after an element and you can use CSS3 selectors to remove the trailing slash from the last element. #footer_menu li:after { content: “https://stackoverflow.com/”; } #footer_menu li:last-child:after { content: “”; } EDIT: The whole thing can be done in one line with better CSS3. #footer_menu li:nth-child(n+2):before { content: “https://stackoverflow.com/”; … Read more
According to the W3C CSS2 reference, which can be found here, Another solution would be to specify ‘list-style’ information only on the list type elements: ol.alpha { list-style-type: lower-alpha } ul { list-style-type: disc } Inheritance will transfer the ‘list-style’ values from OL and UL elements to LI elements. This is the recommended way to … Read more
According to the W3C CSS2 reference, which can be found here, Another solution would be to specify ‘list-style’ information only on the list type elements: ol.alpha { list-style-type: lower-alpha } ul { list-style-type: disc } Inheritance will transfer the ‘list-style’ values from OL and UL elements to LI elements. This is the recommended way to … Read more