I have a div like below i need to align the 3 ul which is inside the li in single row using css.
<div id="printEmilCountDiv" >
<li id="reports-print-email-count">
<ul id="reports-print-email-count-container">
<li>Print count:</li>
<li id="printCount"></li>
</ul>
<ul >
<li>Email count:</li>
<li id="emailCount"></li>
</ul>
<ul >
<li>Other count:</li>
<li id="otherCount"></li>
</ul>
</li>
</div>
As like this
try to this code
#printEmilCountDiv, #printEmilCountDiv *{
list-style-type:none;
margin:0;padding:0;
}
#printEmilCountDiv ul{display:inline-block;vertical-align:top; border:solid 1px red;}
<ul id="printEmilCountDiv" >
<li id="reports-print-email-count">
<ul id="reports-print-email-count-container">
<li>Print count:</li>
<li id="printCount">po</li>
</ul>
<ul >
<li>Email count:</li>
<li id="emailCount">ec</li>
</ul>
<ul >
<li>Other count:</li>
<li id="otherCount"oc>oc</li>
</ul>
</li>
</ul>
Or this like
#printEmilCountDiv, #printEmilCountDiv *{
list-style-type:none;
margin:0;padding:0;
}
#printEmilCountDiv ul{display:inline-block;vertical-align:top; border:solid 1px red;}
#printEmilCountDiv ul li{display:inline-block;vertical-align:top;}
<ul id="printEmilCountDiv" >
<li id="reports-print-email-count">
<ul id="reports-print-email-count-container">
<li>Print count:</li>
<li id="printCount">po</li>
</ul>
<ul >
<li>Email count:</li>
<li id="emailCount">ec</li>
</ul>
<ul >
<li>Other count:</li>
<li id="otherCount"oc>oc</li>
</ul>
</li>
</ul>
You may remove the first li and replace it with div. Then apply a styling like;
ul{
margin-top: 0;
margin-bottom: 0;
}
Which trims the margin. Here is a demo
And you may add float: left; to either ul or li to align them in a row, like this
Related
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:   ;
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>
I am currently trying to change the properties of another object in css but am not sure if I am doing this right. Any help would be appreciated.
ul.drop-menu {
opacity: 0.1;
}
nav > ul > li:hover ~ ul.drop-menu {
opacity: 1;
}
<nav>
<ul>
<li>Test
<ul class="drop-menu">
<li class="1">Test1</li>
<li class="2">Test2</li>
<li class="3">Test3</li>
<li class="4">Test4</li>
<li class="5">Test5</li>
<li class="6">Test6</li>
<li class="7">Test7</li>
</ul>
</li>
</ul>
</nav>
~ is a "general sibling selector", so it will match any element that is a sibling that comes after the element on the left side of the selector.
With your markup, you either just want to remove ~ to target any ul.drop-menu that is a child of li, or if you want the direct descendent, change it to a >. I'm assuming you want the latter, in case you nest multiple .drop-menu's in li's. I added another nested menu and changed your selector a little to demonstrate that.
ul.drop-menu {
opacity: 0.1;
}
nav > ul li:hover > ul.drop-menu {
opacity: 1;
}
<nav>
<ul>
<li>Test
<ul class="drop-menu">
<li class="1">Test1</li>
<li class="2">Test2
<ul class="drop-menu">
<li class="1">Test1</li>
<li class="2">Test2</li>
<li class="3">Test3</li>
<li class="4">Test4</li>
<li class="5">Test5</li>
<li class="6">Test6</li>
<li class="7">Test7</li>
</ul>
</li>
<li class="3">Test3</li>
<li class="4">Test4</li>
<li class="5">Test5</li>
<li class="6">Test6</li>
<li class="7">Test7</li>
</ul>
</li>
</ul>
</nav>
You have to use > instead of ~. Please check this:
ul.drop-menu {
opacity: 0.1;
}
nav > ul > li:hover > ul.drop-menu {
opacity: 1;
}
<nav>
<ul>
<li>Test
<ul class="drop-menu">
<li class="1">Test1</li>
<li class="2">Test2</li>
<li class="3">Test3</li>
<li class="4">Test4</li>
<li class="5">Test5</li>
<li class="6">Test6</li>
<li class="7">Test7</li>
</ul>
</li>
</ul>
</nav>
I want to separate the screen into three columns using a ul tag, and I want to have a normal (vertical) list inside the first column. I tried this but it does not work:
<ul id="content_seperator">
<li class="content_left">
<ul id="vertical-nav">
<li>Menu1</li>
<li> Menu2 </li>
<li> Menu3 </li>
<li> Menu4 </li>
<li> Menu5 </li>
</ul>
</li>
<li class="content_middle"></li>
<li class="content_right"></li>
</ul>
Try the following code. I hope it helps.
#content_seperator,
.content_left,
.content_middle,
.content_right {
display: flex;
}
.content_left,
.content_middle,
.content_right {
flex: 1 1 0
}
<ul id="content_seperator">
<li class="content_left">
<ul id="vertical-nav">
<li>Menu1</li>
<li> Menu2 </li>
<li> Menu3 </li>
<li> Menu4 </li>
<li> Menu5 </li>
</ul>
</li>
<li class="content_middle">Middle</li>
<li class="content_right">Right</li>
</ul>
you may use,
#content_seperator{
display: block;
}
#content_seperator li{
display: inline-block;
vertical-align: top;
}
#content_seperator li ul li{
display: block;
}
you can give width for 'li' by using class.
Currently I am trying to create a header section in HTML, which contains a logo image and a list which is being used as a navigation menu.
The problem which I am facing right now is that, when I am giving a certain height to the list(equivalent to image height) the height of the list is going downwards against the image, and I want to be on the same line and text of the list in the middle. The following is the code snippet of my page.
.header-section>img
{
display:inline-block;
padding:10px;
background-color:yellow;
}
.navigation,.navigation ul
{
list-style:none;
}
.navigation
{
background-color:red;
display:inline-block;
}
.navigation>li
{
display:inline;
text-align:center;
line-height:50px;
}
.navigation ul
{
display:none;
}
<!--Header section-->
<div class="header-section">
<img src="images/logo/logo.png" alt="logo" width="90px" height="30px">
<!--Navigation section-->
<ul class="navigation">
<li>Home</li>
<li class="sub-menu">
About ▼
<ul>
<li>The Company</li>
<li>The Founders</li>
<li>The Team</li>
<li>The Mission</li>
</ul>
</li>
<li class="sub-menu">
Products ▼
<ul>
<li>Solar Panels</li>
<li>Solar Lamps</li>
<li>Solar Heaters</li>
<li>Solar Cookers</li>
</ul>
</li>
<li class="sub-menu">
Services ▼
<ul>
<li>Solar Equipment Repair</li>
<li>Installation</li>
<li>Maintenance</li>
<li>Training</li>
</ul>
</li>
<li class="sub-menu">
Support ▼
<ul>
<li>Training</li>
</ul>
</li>
<li class="sub-menu">
Contact ▼
<ul>
<li>Email Us</li>
<li>Contact Form</li>
</ul>
</li>
</ul>
<!--Social Icons-->
<img src="images/icons/twitter.png">
<img src="images/icons/facebook.png">
<img src="images/icons/google-plus.png">
</div>
<!--Header section closed-->
Add a vertical-align attribute to your images
.header-section > img
{
display:inline-block;
padding:10px;
background-color:yellow;
vertical-align: middle;
}
Update : Float version
Add a "float left" attribute to your images and .navigation and set an image "height + padding" equal to the line-height of your list.
.header-section
{
overflow: hidden;
}
.header-section > img
{
float: left;
padding:10px;
background-color:yellow;
width: 30px;
height: 30px;
}
.navigation
{
padding: 0;
margin: 0;
float: left;
list-style:none;
}
.navigation
{
background-color:red;
}
.navigation > li
{
display:inline;
text-align:center;
line-height:50px;
}
.navigation ul
{
display:none;
}
<!--Header section-->
<div class="header-section">
<img src="images/logo/logo.png">
<!--Navigation section-->
<ul class="navigation">
<li>Home</li>
<li class="sub-menu">
About ▼
<ul>
<li>The Company</li>
<li>The Founders</li>
<li>The Team</li>
<li>The Mission</li>
</ul>
</li>
<li class="sub-menu">
Products ▼
<ul>
<li>Solar Panels</li>
<li>Solar Lamps</li>
<li>Solar Heaters</li>
<li>Solar Cookers</li>
</ul>
</li>
<li class="sub-menu">
Services ▼
<ul>
<li>Solar Equipment Repair</li>
<li>Installation</li>
<li>Maintenance</li>
<li>Training</li>
</ul>
</li>
<li class="sub-menu">
Support ▼
<ul>
<li>Training</li>
</ul>
</li>
<li class="sub-menu">
Contact ▼
<ul>
<li>Email Us</li>
<li>Contact Form</li>
</ul>
</li>
</ul>
<!--Social Icons-->
<img src="images/icons/twitter.png">
<img src="images/icons/facebook.png">
<img src="images/icons/google-plus.png">
</div>
<!--Header section closed-->
This is my list
<ul class="list-inline row ">
<li href="#" style="color:white"> Registrate </li >
<li style="list-style-type:square; color:white" href="#">Quienes Somos </li>
<li style="list-style-type:square; color:white" href="#" style="color:white">Contacto </li >
</ul>
This is my CSS
.list-inline { padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
I get the text and the color but I don't get the square!
list-style-type:square must go in your ul tag.
<ul class="list-inline row" style="list-style-type:square;">
http://www.w3.org/wiki/CSS/Properties/list-style
Set the list-style-type on the ul element rather than the li elements.
<ul class="list-inline row " style="list-style-type: square;">
<li style="color:white"> Registrate </li >
<li style="color:white">Quienes Somos </li>
<li style="color:white">Contacto </li >
</ul>