Is it possible to style an unordered list so that the second line and the ones after that are indented the same as the first line of the list item?
Please see the example for exactly what I mean
O----First Line
--SECOND LINE SHOULD START HERE
--EVERY OTHER LINE SHOULD BE LIKE THIS ALSO
Just to supplement my comment, here is a jsfiddle demonstrating what I mentioned. http://jsfiddle.net/R5ptL/
<ul>
<li>Parent</li>
<ul>
<li>Child1</li>
<li>Child2</li>
<li>Child3</li>
</ul>
<li>Parent2</li>
</ul>
And if you want them to be the same style...
ul, li {
list-style-type: circle; /* or whatever style you choose */
}
EDIT: How to do this with multiple unordered lists AND CSS only: http://jsfiddle.net/R5ptL/1/
use the css first-child selector to apply the indent to every line other than the first.
ex:
ul li:first-child{margin:0px;}
ul li{margin:5px;}
li:not(first-child) {
margin-left: 20px;
}
or
li {
margin-left: 20px;
}
li:first-child {
margin-left: 0;
}
It's like this: (HTML solution, not CSS)
<ul>
<li> first item </li>
<li> second item
<ul>
<li>first item of second list</li>
<li>second</li>
</ul>
</li>
<li> continue primary list </li>
</ul>
In short, you nest a complete new UL inside the primary UL.
My first answer was apparently incorrect after further testing. This should work though:
ul li {
text-indent:-10px;
margin-left:10px;
}
NOTE: This answer runs under the assumption that every line other than the first is simply wrapped text. If those other lines are meant to be sub-points, go with gwin003's answer.
Related
I have a bullet list and I want just a single item without a bullet. How do I do that? For example, in the following, can I get the "Cheese" with no bullet:
<ol>
<li>Milk</li>
<li>Cheese</li>
<li>Goats</li>
</ol>
Many good SO threads deal with changing the entire list, but I'm interested in a specific item.
You can just target any of the list items with class or pseudo selectors
Example below shows this using first-child and class
li:first-child,
.no-bullet {
list-style: none;
}
<ol>
<li>Milk </li>
<li class="no-bullet">Cheese </li>
<li>Goats </li>
</ol>
The solution would be
ol > li:nth-child(2) {
list-style: none;
}
I'm having a hard time understanding why the behavior of certain properties do not follow the behavior stated in the W3 specification.
For example, in the specification it says that the "background-image" and "background-color" property is not inherited.
But the following code proves this otherwise.
The CSS
#nav > li {
background-color: yellow;}
The markup
<div>
<ul id="nav">
<li>This is a list</li>
<li>This is a list</li>
<li>
<ul>
<li>This is a list</li>
<li>This is a list</li>
</ul>
</li>
</ul>
</div>
You will see that even the 2nd level list items which is nested inside the 3rd list item also has their background-color changed, while I only intended for it to be applied only on the direct children which is the 1st level list items.
Now my question is this.
Why is this happening? Who is in the wrong here, the browsers or the specification? Am I missing something?
Any help is appreciated.
I think I found your answer.
When you look at the devtools, you will see, that the 2nd level got no background-color. The color you see, is the color of the parent li :-)
Fiddle
#nav > li {
background-color: yellow;
}
With the border property you can see it better.
Updated fiddle:
http://jsfiddle.net/2brhj2bq/1/
#nav li {
border:1px solid red;
}
#nav > li {
border:1px solid lime;
}
This is because the next UL is also in the Li , and li have bg color yellow so it should be yellow . just think it what have you done , you are assigning bg then you are seeking why it is happening it is not the bg of inner ul li it is the bg of ul#nav li.
I struggled for this issue for hours, but can't get it work still.
I have the html code like this :
<ul>
<li><div>aa</div><div>aa11</div><li>
<li><div>bb</div><div>bb11</div><li>
</ul>
I wondered how to use css to let the <div> display in one line each li. But the <ul><li> label still have its vertical style.
I am new to CSS, and any help will be thankful.
ul li{
display: table;
}
ul li div{
float: left;
}
This will make the <div> inside the <li> to look side by side.
You might also want to add
list-style-type: none;
in order to get rid of the bullet-points. In addition to what #Viswalinga Surya S said
Doing that, would give you this --> http://jsfiddle.net/A35Fe/
It looks like you forgot to close your <li> tags, you have opening <li> tags but you didn't close them with </li>. If you want to make aa and aa11 side-by-side you also need to add a display: inline-block; style to your divs. Here's a demonstration: http://jsfiddle.net/5wLku/
Here's my solution:
<ul>
<li><div>aa</div><div>aa11</div></li>
<li><div>bb</div><div>bb11</div></li>
</ul>
<li style="float:left"><div>aa</div><div>aa11</div></li>
and end your list items with
</li> not with <li>
I have Updated your code, Here is the JSFiddle link and let me know if you want more change:
http://jsfiddle.net/h5bMa
HTML:
<ul>
<li><div>aa</div><div>aaa1</div></li>
<li><div>bb</div><div>bbb1</div></li>
</ul>
CSS:
ul li{
float: left;
}
**Thank you for your answers. I am waiting on a Cache plugin to be removed before I can test and confirm everythign is working correctly.
I have a unordered list that contains some sublist. All I want to update are the Children of the main <ul> "Names" and "Jobs"
<ul>
<li>Names
<ul>
<li>Mike</li>
<li>Bob</li>
<li>Steve</li>
</ul>
</li>
<li>Jobs
<ul>
<li>Police</li>
<li>Fire Fighter</li>
<li>banker</li>
</ul>
</li>
</ul>
I want the ability to only style the child <li>'s of my main <ul> not any of the sub items. The trick is I can not add any classes or id's to the list or sublist. I can put the whole thing in a containing div.
*NOTE if i add a class or ID to my it will add it to all of them. This is a premade template i have no control over.
I was thinking I could do this:
<div id="mylist_container">
<ul>
<li>Names
<ul>
<li>Mike</li>
<li>Bob</li>
<li>Steve</li>
</ul>
</li>
<li>Jobs
<ul>
<li>Police</li>
<li>Fire Fighter</li>
<li>banker</li>
</ul>
</li>
</ul>
</div>
And style it like this:
#mylist_container ul>l1{
font:bold 18px arial;
}
I think you answered your own question! Or at least 99% of the way. Create one more child selector by adding > between #mylist_container and ul. This will only target a ul that is a child of #mylist_container and not go any deeper in the structure.
#mylist_container > ul > li { /* your styles */ }
Try
#mylist_container > ul > li {
font: bold 18px arial;
}
#mylist_container > ul > li ul{
font: normal 10px arial; //assign the default view here
}
Demo: Fiddle
take a look at my code example.
The first targets all <li> and the second targets only <li> inside of another <li>.
ul>li{
any styles in here form the top level li
}
ul>li>ul>li{
styles to cancel out the first styles
}
try this..
div ul li ul li{
color:#000000;
}
div ul li{
color:red;
}
http://jsfiddle.net/Mk3g4/
I have been trying to learn horizontal lists in html. I have the following code,
CSS:
#list li
{
text-decoration:none;
display: inline;
list-style-type: none;
padding-right: 20px;
}
</style>
HTML:
<div >
<ul id="list">
<li>Store </li>
<li>Mac </li>
<li>IPod </li>
<li>IPhone </li>
<li>IPad </li>
<li>ITunes </li>
<li>Support </li>
</ul>
</div>
When I put the id in the div tag (<div id="list">)then it does not show the list horizontally while the current code displays the list horizontally. I don't get the reason behind it. Please help me clear the concept. Thanks
Because a div is not a list element. It has no list-style-type, so it won't change the bullets on any lists within the div. And an 'inline' display type does not propagate down the DOM tree from a parent node, so the inline applies only to the div itself and won't affect the list or li elements.
It works just fine if you put the ID on the div element as well.
Have a look at this fiddle: http://jsfiddle.net/sKaYm/
Your CSS selector #list li says "apply this to any list element that is child of an element with ID 'list' - no matter if it is an immediate child or not." - So basically it doesn't matter how many levels of div's or other elements you wrap around your list, it will still select it.
According to this jsFiddle it works.
list-style-type only changes the marker in front of the item.
to create cross browser horizontal list add float left to each list item :
#list li
{
text-decoration:none;
display: inline;
list-style-type: none;
padding-right: 20px;
float:left;
}