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/
Related
i have some css to align two parts of a list item to the left and right side like so :-
ul li div.left {
float:left;
}
ul li {
text-align:right;
}
<ul>
<li><div class="left">On the left</div>On the right</li>
</ul>
Is it possible to extend the above to add one more part that aligns to the bottom left below the left and right parts?
i have tried :-
<li><div class="left">On the left</div>On the right<p><div class="left">At the bottom<div></p></li>
but it doesnt render correctly
You will need to modify your HTML structure like I've done below and then style accordingly to create the sort of a layout which you want.
Here's a working demo:
ul {
padding: 0px;
}
ul li {
list-style-type: none;
}
ul li.left {
float: left;
}
ul li.right {
float: right;
}
ul li.center {
text-align: center;
}
.block {
overflow: hidden;
}
<ul>
<div class="block">
<li class="left">On the left</li>
<li class="right">On the right</li>
</div>
<li class="center">centered underneath</li>
</ul>
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;
}
I'm trying to center a horizontal list of image links, though it seems that the left of the images are being centered. As you can see, the center of the list of images (which are all the same size) is slightly to the right of the text.
HTML:
<div id='nav'>
<ul>
<li>
<a href=''><img src='images/login.png' /></a>
</li>
<li>
<a href=''><img src='images/add.png' /></a>
</li>
<li>
<a href=''><img src='images/forum.png' /></a>
</li>
</ul>
</div>
Css:
#nav {
text-align: center;
}
#nav ul {
list-style: none;
margin: 20px auto;
}
#nav li {
display: inline-block;
margin: 0px 30px;
}
What can I do to completely center it?
Working Demo : http://jsfiddle.net/3d6TS/
The <ul> tag by default adds padding. You need to set padding:0 manually to <ul> tag.
#nav ul {
list-style: none;
margin: 20px auto;
padding:0;
}
#nav { text-align: center; }
#nav ul { list-style: none; }
#nav ul li { display: inline; }
the solution is the display:inline on the li
A good solution would be to maintain the margin-left and make sure the first child has a left margin of 0. This causes both the first and last children to have no margins on the edges it meets with the parent. This is good as :first-child doesn't catastrophically break styles in >=ie7 where as :last-child is unsupported in <=ie8 making the reverse of this infeasible for the time being.
#nav ul li {
display: inline-block;
margin-left:30px;
}
#nav ul li:first-child {
margin-left:0;
}
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 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.