I have the following list:
<ul id="inline">
<li>One
<ul>
<li>Inline1</li>
<li>Inline2</li>
</ul>
</li>
<li>Two
<ul>
<li>Inline1</li>
<li>Inline2</li>
</ul>
</li>
</ul>
What i want to show is the first level li as new lines and the nested list to appear at the same height as its parent but inline. Like this:
One Inline1 Inline2
Two Inline1 Inline2
This is what i have right now:
#inline {
width: 100%;
list-style-type: none;
padding:0;
margin:0;
}
#inline + ul > ul {
display:inline;
}
But I have to basic understanding of css to figure out what is going wrong.
You need to set the ul (child of #inline) and the children li's of these uls to display:inline;. The CSS would be :
DEMO
#inline ul, #inline ul li {
display:inline;
padding:0;
}
I have a simple work around for this. Lets see the fiddle.
OLD: http://jsfiddle.net/kiranvarthi/sfho4xn8/
Updated Fiddle: http://jsfiddle.net/kiranvarthi/sfho4xn8/2/
#inline {
width: 100%;
list-style-type: none;
padding:0;
margin:0;
}
#inline ul li {
display:inline;
}
Use this CSS to make it work
#inline {
width: 100%;
list-style-type: none;
padding:0;
margin:0;
}
#inline ul {
display:inline-block;
list-style:none;
margin-left:-30px;
}
#inline ul li {
display:inline-block;
list-style:none;
text-decoration:none;
margin-left:0px;
}
Related
I have the following css:
ul {
padding:0;
margin:0;
}
li {
padding:0;
margin:0;
list-style:none;
}
ul.square li {
padding-left:20px;
list-style:square;
}
and the following Html structure:
<ul class="square">
<li>blah blah blah</li>
</ul>
the list comes up with no padding and no leading square. How can I fixed this issue?
Here you go! Just use margin, instead of padding –> Demo
ul.square {
padding:0;
margin: 0; /* reset the margin */
margin-left:20px; /* then add yours */
list-style: square;
}
This only works with ol (tried it with ul and it doesn't work). Could not get the square to work with ul with any solution provided here or elsewhere. But at least this solution does add the margin/indentation. Thank you for all of the help.
In CSS:
ul {
padding:0;
margin:0;
}
li {
padding:0;
margin:0;
list-style:none;
}
ol.margin {
padding:0;
margin: 0; /* reset the margin */
margin-left:20px; /* then add yours */
}
then in the HTML doc
<ol id="margin">
<li>blah</li>
</ol>
I want to float <li> to the left in ul ul - without setting a width to the inner <ul> element
The problem is that the <ul> is in a nav with width:70px; (take a look at jsfiddle)
Got the following ( http://jsfiddle.net/qfemF/ )
CSS:
nav {
width:70px;
}
ul {
margin:0;
padding:0;
list-style:none;
}
li {
position:relative;
}
ul ul {
position:absolute;
left:70px;
width:auto;
}
ul ul li {
float:left;
}
HTML:
<nav>
<ul>
<li>Test
<ul>
<li>sub1</li>
<li>sub2</li>
</ul>
</li>
</ul>
</nav>
If i set e.x. ul ul { width:200px; } it works, i also tried width:auto - but that doens't work.
This is because of the position:relative that you have set on your <li> in your css.
Delete this row in your css and it should be fine:
li { position:relative; }
Check the demo to see its working.
DEMO
Update: (after new comment from OP)
You schould give the ul ul a width with fixed pixels.
ul ul {
....
width:200px; /* instead of width:auto; */
}
Check the demo to see its working.
DEMO
C Travel's answer is correct, you need to remove position: relative; from your li
But if you can't do that for one reason or another, an alternative is to set display: table; on ul ul
Demo
I'm creating a page where I have two vertical menus that each have a header, and then directly underneath navigation type links.
I'm using an UL for the two headers, and would like to use sub UL for the rest of each menu. I'm having a problem where the sub UL takes on the properties of the parent and is displyaing inline instead of vertically. Also, the submenu links are indenting instead of positioning directly under the headers. I'm still fairly new at CSS, so if I'm going about this incorrectly, I really appreciate any advice. Thanks for your help
#Contentmenu ul {
margin: 0;
padding: 40px;
margin-left:auto;
margin-right:auto;
width:960px;
list-style-type: none;
list-style-image: none;
}
#contentmenu li {
display: inline;
padding:10px;
float: left;
}
#contentmenu a {
display:block;
padding:10px;
width:200px;
color:#ffffff;
font-size:26px;
background-color:#c7daff;
}
#Contentsubmenu ul {
margin: 0;
margin-left:auto;
margin-right:auto;
width:960px;
list-style-type: none;
list-style-image: none;
}
#contentsubmenu li {
display:block;
floa:left;
}
#contentsubmenu a {
display:block;
width:200px;
color:#000000;
font-size:20px;
border-bottom:solid;
border-bottom-width:1px;
background-color:#ffffff
}
HTML
<div id="contentmenu">
<ul>
<li>Header 1
<div id="contentsubmenu">
<ul>
<li>Article 1</li>
<li><a href="#" Article 2</a></li>
</ul>
</div>
</li>
<li>Articl3</li>
</ul>
if you want to only target the top-level , you would use this:
#contentmenu > ul
and
#contentmenu > ul > li
Also, CSS is case-sensitive, so make sure you are using #contentmenu
Does this fix your other issue as well?
Your CSS code is wrong at the element #contentsubmenu li. You use floa: left;, which is a incorrect CSS code. Additionally, just use float: none; on this element instead of float: left; and it will work as desired.
Demo on JSFiddle
Therefore that you are new in CSS:
Try to write clean code with correct indentations.
I have list in mvc to which I want to inline in blocks.
List-
<ul>
<li>
#foreach (var item in Model) {
<img src="#item.cardFilePath"/>
}
</li>
</ul>
CSS I tried here-
li
{
list-style-type: none;
display: inline-block;
float: left;
margin: 0px 24px;
padding-left: 24px;
}
Basically there will be images to inline coming dynamically via list through model.
How do I inline these images coming in list form.
What seems to be the problem? Try using this FIDDLE
<ul>
#foreach(var item in model)
{
<li>
<img src="#item.cardFilePath" />
</li>
}
</ul>
ul {
list-style:none;
padding:0;
}
ul li {
float:left;
display:block;
margin-right:10px;
}
ul li:last-child{
margin-right:0;
}
you can try this code.. here is the fiddle link. http://jsfiddle.net/PBrU8/15/
ul {
list-style-type:none;
padding:0;
}
ul li {
display: inline-block;
margin: 0 5px 0;
}
Why I prefer here using display:inline-block over float please read this article.
http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/
I have a a breadcrumb in my subheader however the active breadcrumb appears underneath the list. I would like it so that they are both in the same line.
HTML:
<div id="breadcrumb">
<ul>
<li>Home ></li>
<li class="active">Marketing Items</li> </ul> </div>
CSS:
#breadcrumb {
font-size:11px;
background-color:#F2F2F2;
}
#breadcrumb ul {
margin:0px;
margin-bottom:0px;
margin-left:4px;
list-style: none;
background-color:#F2F2F2;
}
#breadcrumb .active {
color:#B3B3B3;
}
Here is also the jsfiddle: http://jsfiddle.net/4nRPY/
Use float:left or display: inline-block. But, with float left you have to clear the element right after that.
#breadcrumb ul li{
float: left;
}
Use display: inline-block; on your <li> tags
#breadcrumb ul li {
display: inline-block;
}
DEMO: http://jsfiddle.net/4nRPY/2/
You can this way to chive to that
li{float:left;}
Demo http://jsfiddle.net/4nRPY/3/
I prefer a pseudo element:
JSFiddle
HTML
<div id="breadcrumb">
<ul>
<li>Home</li>
<li class="active">Marketing Items</li>
</ul>
</div>
CSS
#breadcrumb ul li:after {
content:">";
padding:0 0.5em;
}
#breadcrumb ul li:last-child:after {
content:"";
padding:0;
}
Slighty less browser support but no extraneous HTML mark-up and you can change it throughout your site by changing one CSS property.