First <li> element in <ul> in same line - html

<ul>
<li>1</li>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</ul>
How would I display this list like so:


Display the ul as inline-block inside the li, and align it vertically to top:
.nested {
display: inline-block;
vertical-align: top;
}
<ul>
<li>1
<ul class="nested">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
</ul>


use display:inline-block in your nested ul tag, along with vertical-align:top
<ul>
<li>
<ul style="display:inline-block;vertical-align:top;">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
</ul>


You can add float: left to ul li and ul ul as follows:
<ul>
<li style="float: left;">1</li>
<ul style="float: left;">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</ul>


.aligned-innerlist {
margin-top: -17px;
}
<ul>
<li>1
<ul class="aligned-innerlist">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
</ul>

Related

How to align an image in a list ( ul > li ) in HTML/CSS?

I tried to get the image on the left and the list on the right.
I want this
https://2.pik.vn/2020cfe5742b-09a9-4049-8756-97a93a9f2045.png
But I got this
https://2.pik.vn/2020dcdc684b-ce3b-4b6b-bc00-db421831628f.jpg
h1 {
color: #ff006e;
text-align: center;
}
.img {
border: solid;
float: left;
}
<h1>Flower</h1>
<div>
<img class="img" width="200" height="200" src="hoa.png" alt="">
</div>
<div>
<ul>
<li>
<span>List 1</span>
<ul>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
</li>
<li>
<span>List 2</span>
<ul>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
</li>
</ul>
</div>

try like this
h1 {
color: #ff006e;
text-align: center;
}
.image{
float:left;
}
.img {
border: solid;
float:left;
}
.content{
float:left;
}
<body>
<h1>Flower</h1>
<div class="image">
<img class="img" width="200" height="200" src="hoa.png" alt="">
</div>
<div class="content">
<ul>
<li>
<span>List 1</span>
<ul>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
</li>
<li>
<span>List 2</span>
<ul>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
</li>
</ul>
</div>
</body>

You have not provided float: left style for the content class so it gets overlapped with the img class. Providing an float:left style for your content class will get the desired positioning without overlapping.
.content {
float: left;
}

Something like this
h1 {
color: #ff006e;
text-align: center;
}
.img {
border: solid;
float: left;
}
ul,
li {
padding: 0;
margin: 0;
}
ul {
margin-left:30px;
}
div>ul {
float: left;
}
<h1>Flower</h1>
<div>
<img class="img" width="200" height="200" src="hoa.png" alt="">
</div>
<div>
<ul>
<li>
<span>List 1</span>
<ul>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
</li>
<li>
<span>List 2</span>
<ul>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
</li>
</ul>
</div>

you need to use ol order list in the parent element
so no need to number your element manually ol will do the job
also margin image form the right using margin-right and change the inner ul list type to square
h1 {
color: #ff006e;
text-align: center;
}
.img {
border: solid;
float: left;
margin-right:30px;
}
ol ul{
margin-left:170px;
list-style-type:square;
}
<h1>Flower</h1>
<div>
<img class="img" width="200" height="200" src="hoa.png" alt="">
</div>
<div>
<ol>
<li>
<span>List</span>
<ul>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
</li>
<li>
<span>List</span>
<ul>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
</li>
</ol>
</div>

add space between ul and li tag css inline

I've the following code with nested list items as shown below:
<ul style={{padding-top: '15px'}}>
<li style={{margin-left: '20px'}}>First Services</li>
<ul style={{margin-left: '30px'}}>
<li>get1</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get2</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get3</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get4</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get5</li>
</ul>
<li style={{margin-left: '20px'}}>Second Services</li>
<ul style={{margin-left: '30px'}}>
<li>get6</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get7</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get8</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get9</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get10</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get11</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get12</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get13 </li>
</ul>
<li style={{margin-left: '20px'}}>Workflows</li>
<ul style={{margin-left: '30px'}}>
<li>Workflow for someone </li>
</ul>
</ul>
My Goal:
I want some space between the following:
1) First Services and get1
2) get5 and Second Services
3) Second Services and get6
4) get13 and Workflows
5)Workflows and Workflow for someone
How should I go about it? Is adding an empty paragraph tag <p></p> a good idea between each of the above 5 things?

if you mean horizontal space (white space), use: &nbsp ;
if you mean vertical space, try: (CSS property) line-height, padding
or margin.
you might want to remove this from being inline and use your linked stylesheet instead as it might cause issues with your styling.

You should use classes for this. Right now, the simplest way is to wrap a div around your whole list, apply a class to it (in my example I used parent_class) and use this selector: div.parent_class > ul >li It only selects the li elements of the first level ul:
div.parent_class > ul >li {
margin-top: 10px;
margin-bottom: 10px;
}
<div class="parent_class">
<ul style="padding-top:15px;">
<li style="margin-left:20px">First Services</li>
<ul style="margin-left:30px">
<li>get1</li>
</ul>
<ul style="margin-left:30px">
<li>get2</li>
</ul>
<ul style="margin-left:30px">
<li>get3</li>
</ul>
<ul style="margin-left:30px">
<li>get4</li>
</ul>
<ul style="margin-left:30px">
<li>get5</li>
</ul>
<li style="margin-left:20px">Second Services</li>
<ul style="margin-left:30px">
<li>get6</li>
</ul>
<ul style="margin-left:30px">
<li>get7</li>
</ul>
<ul style="margin-left:30px">
<li>get8</li>
</ul>
<ul style="margin-left:30px">
<li>get9</li>
</ul>
<ul style="margin-left:30px">
<li>get10</li>
</ul>
<ul style="margin-left:30px">
<li>get11</li>
</ul>
<ul style="margin-left:30px">
<li>get12</li>
</ul>
<ul style="margin-left:30px">
<li>get13 </li>
</ul>
<li style="margin-left:20px">Workflows</li>
<ul style="margin-left:30px">
<li>Workflow for someone </li>
</ul>
</ul>
</div>

.example-list {
margin:0px;
}
.example-list > li {
margin: 30px 0px;
}
<ul class="example-list">
<li>First Services</li>
<ul>
<li>get1</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get2</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get3</li>
</ul>
<ul>
<li>get4</li>
</ul>
<ul>
<li>get5</li>
</ul>
<li style={{margin-left: '20px'}}>Second Services</li>
<ul>
<li>get6</li>
</ul>
<ul>
<li>get7</li>
</ul>
<ul>
<li>get8</li>
</ul>
<ul>
<li>get9</li>
</ul>
<ul>
<li>get10</li>
</ul>
<ul>
<li>get11</li>
</ul>
<ul>
<li>get12</li>
</ul>
<ul>
<li>get13 </li>
</ul>
<li style={{margin-left: '20px'}}>Workflows</li>
<ul>
<li>Workflow for someone </li>
</ul>
</ul>

I would do the following (or something similar - keep in mind it's not good practice to have <ul> as a child of another <ul> - you can validate here: http://validator.w3.org/). Remove the inline styles, you'll deal with A LOT of headaches later if you write you CSS as you have. Set classnames for the bits you want extra space for (you can edit the {{20px}} below for how much space you want (or if you want left/right margins, you can edit the whole rule).
<style>
.title {
margin-left: 20px;
}
.top-list {
padding-top: 15px;
}
.top-list .spacer-top {
margin-top: {{20px}};
}
.top-list > li > ul {
margin-left: 30px;
}
</style>
<ul class="top-list">
<li class="title">First Services</li>
<li class="spacer-top">
<ul>
<li>get1</li>
</ul>
</li>
<li>
<ul>
<li>get2</li>
</ul>
</li>
<li>
<ul>
<li>get3</li>
</ul>
</li>
<li>
<ul>
<li>get4</li>
</ul>
</li>
<li>
<ul>
<li>get5</li>
</ul>
</li>
<li class="title" class="spacer-top">Second Services</li>
<li class="spacer-top">
<ul>
<li>get6</li>
</ul>
</li>
<li>
<ul>
<li>get7</li>
</ul>
</li>
<li>
<ul>
<li>get8</li>
</ul>
</li>
<li>
<ul>
<li>get9</li>
</ul>
</li>
<li>
<ul>
<li>get10</li>
</ul>
</li>
<li>
<ul>
<li>get11</li>
</ul>
</li>
<li>
<ul>
<li>get12</li>
</ul>
</li>
<li>
<ul>
<li>get13 </li>
</ul>
</li>
<li class="title spacer-top">Workflows</li>
<li class="spacer-top">
<ul>
<li>Workflow for someone </li>
</ul>
</li>
</ul>

Hoverable Dropdown

I tried to make a Hoverable text, but it gives me a little visual error. I want to make it in this way: http://i.imgur.com/fg1NTab.png
but at my website it gives in this way.
http://vestigedayz.com/wqeq
(press on the A from menu on my website)
This is my CODE.
<div class="liste">
<div class="dropdown">
<ul> <li>A</li> </ul>
<div class="dropdown-content">
<li>AA</li>
<li>AB</li>
<li>AC</li>
<li>AD</li>
</div>
</div>
<ul> <li>B</li> </ul>
<ul> <li>c</li> </ul>
<ul> <li>d</li> </ul>
<ul> <li>e</li> </ul>
<ul> <li>f</li> </ul>
<ul> <li>g</li> </ul>
<ul> <li>h</li> </ul>
<ul> <li>i</li> </ul>
<ul> <li>j</li> </ul>
<ul> <li>k</li> </ul>
<ul> <li>l</li> </ul>
<ul> <li>m</li> </ul>
<ul> <li>n</li> </ul>
<ul> <li>o</li> </ul>
<ul> <li>p</li> </ul>
<ul> <li>q</li> </ul>
<ul> <li>r</li> </ul>
<ul> <li>s</li> </ul>
<ul> <li>t</li> </ul>
<ul> <li>u</li> </ul>
<ul> <li>v</li> </ul>
<ul> <li>w</li> </ul>
<ul> <li>y</li> </ul>
<ul> <li>z</li> </ul>
</div>
</div>
</div>
AND THE STYLE CSS
.header .liste {background:#ffd564;border-bottom:5px solid #ffecb8;font-size:13px;height:50px;overflow:hidden;padding-left:25px;margin-top:30px;}
.header .liste > ul li {float:left;padding-right:30px;margin:17px 0;}
.header .liste > ul li a {text-decoration:none;color:#1b1b1b;text-transform:uppercase;}
.dropdown {
position: fixed;
display: table;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffecb8;
min-width: 950px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
display: inline-table;
}

Ok, to get A in the right spot you have to put that ul element on the same level as other ul elements (B, C, D etc.)
So change your list div like this
<div class="liste">
<ul><li>A</li></ul>
<div class="dropdown">
<div class="dropdown-content">
<li>AA</li>
<li>AB</li>
<li>AC</li>
<li>AD</li>
</div>
</div>
<ul> <li>B</li> </ul>
<ul> <li>c</li> </ul>
<ul> <li>d</li> </ul>
<ul> <li>e</li> </ul>
<ul> <li>f</li> </ul>
<ul> <li>g</li> </ul>
<ul> <li>h</li> </ul>
<ul> <li>i</li> </ul>
<ul> <li>j</li> </ul>
<ul> <li>k</li> </ul>
<ul> <li>l</li> </ul>
<ul> <li>m</li> </ul>
<ul> <li>n</li> </ul>
<ul> <li>o</li> </ul>
<ul> <li>p</li> </ul>
<ul> <li>q</li> </ul>
<ul> <li>r</li> </ul>
<ul> <li>s</li> </ul>
<ul> <li>t</li> </ul>
<ul> <li>u</li> </ul>
<ul> <li>v</li> </ul>
<ul> <li>w</li> </ul>
<ul> <li>y</li> </ul>
<ul> <li>z</li> </ul>
</div>
Then find these properties and remove padding left:
.header .liste {
background: #ffd564;
border-bottom: 5px solid #ffecb8;
font-size: 13px;
height: 50px;
overflow: hidden;
/* padding-left: 25px; */
margin-top: 30px;
}
Then move your opened dropdown down (top: 50px)and change min width to 948px
.dropdown-content {
/* display: none; */
position: absolute;
background-color: #ffecb8;
min-width: 948px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
top: 50px;
}
Then give your liste li padding left:
.liste li {
padding-left: 25px;
}
And here is the screenshot of the result: http://screencast.com/t/RD3Akbot
Also, because structure changed you will have to deal with hover.
Here is the code for the hover:
.liste ul:hover + .dropdown {
display: block;
}
This says, when you hover over this ul element show next .dropdown div. So all you have to do is add .dropdown sections underneath appropriate ul section. I will add the code snippet below.
<ul> <li>A</li> </ul>
<div class="dropdown">
<div class="dropdown-content">
<li>AA</li>
<li>AB</li>
<li>AC</li>
<li>AD</li>
</div>
</div>
<ul> <li>B</li> </ul>
<div class="dropdown">
<div class="dropdown-content">
<li>AA777</li>
<li>AB777</li>
<li>AC777</li>
<li>AD777</li>
</div>
</div>
Oh, I forgot you have to declare your .dropdown display:none too. So when you hover it will display block.

select last of the Element gg in list of ul li from recursive structure with css

I want to select with css the last of child <li> that text appear gg
I want only select Last gg <li> Please Help
ul {
margin: 0;
padding: 0;
}
.container ul li + li:nth-last-child(1) li:last-child {
border: 1px solid red
}
<div class="container">
<ul class="ng-scope">
<li>
<ul>
<li>a</li>
</ul>
</li>
<li>
aa
<ul>
<li>
bb
<ul>
<li>
cc
<ul>
<li>
dd
<ul>
<li>
ee
<ul>
<li>
ff
<ul>
<li>
gg
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Try this
ul { margin:0; padding:0;}
.gg{
color:red;
}
<div class="container">
<ul class="ng-scope">
<li>
<ul>
<li>a</li>
</ul>
</li>
<li>
aa
<ul>
<li>
bb
<ul>
<li>
cc
<ul>
<li>
dd
<ul>
<li>
ee
<ul>
<li>
ff
<ul>
<li class="gg">
gg
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

ul li css not working properly

Got a strange issue:
In my .cshtml I have a second thing:
<ul>
<li>Test</li>
<li>Test2
<ul>
<li>Test3</li>
</ul>
</li>
<li>Test4
<ul>
<li>Test5</li>
</ul>
<ul>
<li>Test6</li>
</ul>
</li>
</ul>
Which supposed to work like this:
Test
Test2
Test3
Test4
Test5
Test6
BUT instead of it, it works this way:
Test
Test2
Test3
Test4
Test5
Test6
The only thing I have in css for this is list-style: none;
Also main <ul> is placed inside of <div> which have text-align: left; (without it, all items are centered).
I am a newbie speaking of css so, I can't get, what I am missing.
EDIT:
Forgot one thing. This works fine in jsfiddle.

Just reset all your styles and give </li>. You are using <li> only for opening and closing it:
<ul>
<li>Test</li>
<li>Test2
<ul>
<li>Test3</li>
</ul>
</li>
<li>Test4
<ul>
<li>Test5</li>
</ul>
<ul>
<li>Test6</li>
</ul>
</li>
</ul>
Your Mistake
<ul>
<li>Test<li> <!-- Should be </li> not <li> -->
<li>Test2
<ul>
<li>Test3</li>
</ul>
<li><!-- Should be </li> not <li> -->
<li>Test4
<ul>
<li>Test5</li>
</ul>
<ul>
<li>Test6</li>
</ul>
<li><!-- Should be </li> not <li> -->
</ul>
Preview:

Just check this out...
OR
Provide the CSS you have used..
div {
text-align: left;
}
ul {
list-style: none;
}
<div>
<ul>
<li>Test</li>
<li>Test2
<ul>
<li>Test3</li>
</ul>
</li>
<li>Test4
<ul>
<li>Test5</li>
</ul>
<ul>
<li>Test6</li>
</ul>
</li>
</ul>
</div>

I guess this might be your issue.
padding:0px;
margin:0px;
ul li ul
{
padding:0px;
}
<ul>
<li>Test</li>
<li>Test2
<ul>
<li>Test3</li>
</ul>
</li>
<li>Test4
<ul>
<li>Test5</li>
</ul>
<ul>
<li>Test6</li>
</ul>
</li>
</ul>
ANSWER
Note : So remove padding property from your ul CSS.
ul li ul
{
/* padding:0px; REMOVE IT If It's 0PX' */
}
<ul>
<li>Test</li>
<li>Test2
<ul>
<li>Test3</li>
</ul>
</li>
<li>Test4
<ul>
<li>Test5</li>
</ul>
<ul>
<li>Test6</li>
</ul>
</li>
</ul>

The solution that I came up with is that you should wrap your un-ordered list with div tag that has a class name. Ex. <div class="test"></div>
HTML:
<div class="test">
<ul>
<li>Test</li>
<li>Test2
<ul>
<li>Test3</li>
</ul>
</li>
<li>Test4
<ul>
<li>Test5</li>
</ul>
<ul>
<li>Test6</li>
</ul>
</li>
</ul>
</div>
CSS
.test ul li {
list-style: none;
text-align: left;
}