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.
Related
Is there a difference beetwen #1 and #2? I'm thinking about cross browser compatibility and accessibility. Should I prefer one approach to the other or it doesn't make a difference?
Any link to articles on the subject is welcome.
<div class="tags">
<ul>
<li>tag 1</li>
<li>tag 2</li>
<li>tag 3</li>
</ul>
</div>
<ul class="tags">
<li>tag 1</li>
<li>tag 2</li>
<li>tag 3</li>
</ul>
A div is an empty (semantically meaningless) element until you give it styles and content. Since both divs and uls are both block-level elements by default, it seems like it's just adding extra code to use a wrapping div. Unless you are trying to do something like, say, style the area around the ul, where you may want a wrapping div with its own styles applied. Is there any particular purpose you have in mind that we may see?
In cases where I want to put different content in the container, like with AJAX insertings, I prefer option 1. Since both div and ul are block-level elements, adding an extra div container is overkill, unless you want to style the div (i.e. padding)
I have a series of LI inside a UL like this:
<ul>
<li class="section left"></li>
<li>I want to float this on the left</li>
<li>I want to float this on the left</li>
<li>I want to float this on the left</li>
<li class="section right"></li>
<li>I want to float this on the right</li>
<li>I want to float this on the right</li>
<li>I want to float this on the right</li>
</ul>
This HTML is generated by php and I cannot alter the HTML, on the other hand I have the ability to assign classes to individual LI elements. The UL and LIs will contain form elements, which I want to distribute in two sections, floating some contents (some LIs) on the left and some content (other LIs) on the right.
If I could nest ULs within the main UL this would be much easier, treating inner ULs as blocks, but I can't do that here.
How to accomplish the same result with CSS given the HTML constraints mentioned above? I mean yeah I could assign floating classes individually to each LI but I was hoping to a more elegant solution here.
thank you
Add the following CSS3 code:
ul{width:100%;list-style:none;}
/* the '~' (general sibling combinator)
* selector will select all following siblings in the document tree.
* This selector is part of the CSS3 selector recommendation,
* see also http://www.w3.org/TR/selectors/#general-sibling-combinators
*
*/
li.section.left, li.section.left ~ li{
background-color:#faa;
float:left;
margin-right:1em;
}
li.secton.right , li.section.right ~ li{
background-color:#afa;
float:right ;
margin-left:1em;
margin-right:0;
}
Use this with your proposed code and you'll get what you need (at least in decent browsers). JSFiddle Demo / Demo with small font size (to see effect)
Update: IE7+ compatible version (simply without :not)
Not sure how exactly you want the list to look... But, if you can assign a right class to the list items, you can set the CSS along the lines shown below to position them:
<html>
<head>
<style>
li {width:300px; list-style-position:inside;}
li.right {background:pink; text-align:right; direction:rtl;}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li class="right">Item 3 -- right</li>
<li>Item 4</li>
<li class="right">Item 5 -- right</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
</body>
</html>
Hm, bit hard.
Is the amount of elements fixed?
If so, first thing that comes to thought is using the adjacent sibling selector (+).
li.section.left,
li.section.left + li,
li.section.left + li + li,
li.section.left + li + li + li {
float: left
}
Same for the float-right elements ...
Otherwise, I would try and use jquery to get to the elements and assign classes to them.
I think the best solution to this, is creating the list that you have like this:
<div>
<ul>
<li>I want to float this on the left</li>
<li>I want to float this on the right</li>
<li>I want to float this on the left</li>
<li>I want to float this on the right</li>
<li>I want to float this on the left</li>
<li>I want to float this on the right</li>
</ul>
</div>
Then in the CSS you give all LI a float left and style them.(I mean width, height and so on)
After that build a little div around it and give it a max with you want you form to be (be sure the LI fit within it in rows of 2.)
This could be a solution but i don't know how much of the HTML you can alter.
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>
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.
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>