I have a really simple set up:
<div class="container">
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
</div>
I had assumed that all contents and the bullets of the UL would be within the div, but currently this is not the case.
The bullet points for the UL appear outside of the div and effectively disappear when overflow is hidden.
To me this is somewhat broken and cross browser compatible, and I've scanned the HTML spec but couldn't find anything saying this should happen.
Is there a CSS fix for it or other layout fix?
You'll want to use list-style-position:
ul {
list-style-position: inside;
}
list-style-position: inside works great unless your bullet points will need multiple lines on small screens as your text will align with the bullet point rather than where the text begins.
Keeping the default text-align: outside, allowing for a small margin and aligning the text to the left to override any centered containers gets around the bullet point alignment problem.
ul, ol {
margin-left: 0.75em;
text-align: left;
}
You usually lose the list decorations to the overflow of a div when your UL/OL and LI don't have enough padding, or you are floating elements or display: inline.
Try adding some padding/margins to your list items (LI element).
Are you floating your List items to the left or right? If so then the following will solve your problem.
<div class="container">
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
<div style="clear:both;"></div>
</div>
For some cases, using two divs can help.
<div class="container">
<div style="margin: 3%">
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
</div>
</div>
This kind of problems can usually be fixed using a good reset.css and re-writing all the information such as list-style and so on.
if using float property on list make sure you only add the style the the selected list and not all list elements on the page.
Related
When making tabs on a website, I always used an unordered list with inline-block list items. Why is this generally considered the correct way over something like a few divs with the same inline-block display setting?
.tabs li {
display: inline-block;
}
<ul class='tabs'>
<li>Tab one</li>
<li>Tab two</li>
...
</ul>
vs
.tabs > div {
display: inline-block;
}
<div class="tabs">
<div>Tab 1</div>
<div>Tab 2</div>
...
</div>
I realize this question can be subjective, but I think there exists an objective answer.
Unstylized content:
When stripped of the CSS, the <ul> format will give the viewer a better understanding of the purpose of the elements.
That gives it more semantic meaning and is the perfect element for navbars and tabs..divs per se don't carry any semantic meaning with them..
semanticaly, ideologically, and when viewing as unstyled content, unordered list is more close to what you're trying to achieve than just bunch of divs.
With HTML5, this is even the only way you should go, because your list should be included inside a <nav> element. See documentation on MDN. So the answer is, for semantic. With a list, the items are linked to each other, which improves accessibility.
I am trying to produce a Navbar similar to the one on this page :
http://wrapbootstrap.com/preview/WB0375140
I am using Bootstrap 3 and can create the top corner rounded boxes with slight gradient at bottom easy enough.
The thing I am struggling with is that the menu items in the navbar on that example are all the same width regardless of how wide the text in them is.
I am scratching my head trying to find out how that is done - And ideas much appreciated.
You have to add css width property to all elements in the navbar.
Assuming your navbar is something like this:
<div id="myCustomNavbar">
<ul>
<li class="active">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
You should add some style with CSS:
#myCustomNavbar > ul > li
{
width: 100px !important;
}
Remember you can always right-click the element you are interested in (in the sample webpage), and click Inspect element. There you can see all html markup and CSS styles applicated to that element
I have an ordered list that I want to put a border on the left.
<ol class="steps">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<ol>
.steps {border-left: 5px double #7ab800;}
In Firefox and Safari, the border displays outside the numbers for the <ol>. However, IE8 displays the border inside the numbers, right next to the text for each <li>.
I tried changing <display> to inline-block but that removes the numbering. I tried changing list-style-position to inside but that changes the indentation of the list without moving the position of the border. There are no floats involved. There is a <div> wrapping the <ol> but it is not styled in any way.
I'm stumped. How can I get IE8 to display the border the same as Firefox and Safari?
Try putting a div tag around your list and apply your class to the div instead.
Can I make bulleted lists on my site that use <ul> and <li> tags have a different indentation distances?
Element One
Element Two
and even this line
which is not in an <li> tag are indented
List elements without the <ul> tags are
not indented
I would like to indent some elements, but the default distance is too much and the sans-indent is too little.
<ul style="padding-left:20px">
<li>Element 1</li>
<li>Element 2</li>
</ul>
I think the default indentation is 40px, this halves it.
li {
margin-left: 10px;
}
ul li{
margin-left: 20px;
}
A slightly cleaner way to adjust both of the indentations. Margin and padding differ, so use whichever suits you best.
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>