This is the code for a horizontal <ul> that I'm using:
.list ul{
width: 100%;
}
.list li{
display: inline;
list-style-type: none;
padding-right: 20px;
padding-bottom: 20px;
}
Using this, if I do this:
<ul class="list">
<li>
<img src="myImg.png" />
<span class="edit"></span>
<span class="delete"></span>
</li>
</ul>
Then it all works, however if I put a <br> between the image and the edit/delete buttons, e.g:
<ul class="list">
<li>
<img src="myImg.png" />
<br />
<span class="edit"></span>
<span class="delete"></span>
</li>
</ul>
Then the list breaks, and I get the images in a vertical list instead of horizontal. Screenshot when its working:
Screenshot of when its not working:
Any ideas?
Replace the
display: inline
with
float: left
Example fiddle
The solution is to use: display:inline-block on your li element which then allows all other markup to function correctly, both in and out of your list.
inline-block: The element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element
Here is a jsfiddle showing an example.
The above jsfiddle is now edited to support older IE7 to work alongside modern browsers. The order of the .css for display is important. To throw in support for IE6, then additonal _height: 30px; where 30 is your required height needs to be added. But IE6 browser use is less than 1%.
Try to use for .list li { float:left; } instead { display:inline; } and will work.
Related
Good day, beginner here just want to ask i'm trying to create a list just like the one in the image attached, should use an li tag and add a span beside it?
<li>
Accessories
<span>6%</span>
</li>
but what happens when li tag have longer text the numbers beside it do not align vertically when I add margin to the span to separate them.
Sample:
Result:
You can make you li flex and use justify content space between:
.flex {
list-style: none;
width: 50%;
margin: 0;
padding: 0;
}
.flex>li {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 0.5em;
}
.flex span {
margin-left: 1em;
/*bit of spacing between link and span in case text is very long */
}
<ul class="flex">
<li>
Accessories
<span>6%</span>
</li>
<li>
Another
<span>16%</span>
</li>
<li>
And Another that might have long text that could spill over 2 lines
<span>12%</span>
</li>
</ul>
The advantages of using flex over float:
you don't need a clear fix
if your anchor is over multiple lines, your span stays on the same line rather than being pushed underneath
floats were never intended to be used to layout documents like that so don't abuse them, now css has progressed, use proper techniques instead
Create an order list and set list type none then set span to float right,With that the span always be floated to right. This method is quite simple and responsive the other methods like margin and spacing are good as well but they aren't responsive and easily break in small devices
ul{
list-style-type:none;
padding:20px;
width:200px;
}
span{
float:right;
}
<ul>
<li>
<p>Computer<span>$6</span></p>
</li>
<li>
<p>Computer<span>$6</span></p>
</li>
</ul>
You can add style to
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul>
<li>
Accessories
<span style="float: right;">6%</span>
</li>
<li>
Accessorieaaaaa
<span style="float: right;">6%</span>
</li>
<li>
Access
<span style="float: right;">6%</span>
</li>
<li>
As
<span style="float: right";>6%</span>
</li>
</ul>
</body>
</html>
I SUGGEST you to use the span tag between the list tags and use the margin attribute to fix the space between them.
I am having an issue in Chrome where an empty content editable div is causing undesired line spacing inside of an ordered list. The following HTML viewed in Internet Explorer works as expected but when viewed in Chrome the editable div is moved below the number when it is empty.
<body>
<ol>
<li>
<div contenteditable="true"></div>
</li>
</ol>
</body>
The image below shows that once text has been entered into the editable div the content shows up where expected but when the text is empty the content is moved down below the 1.
I'm wondering if there is CSS I can apply to cause the empty div to show up beside the 1 like in IE.
Here's a fiddle.
Forget about the div element. Just add the contenteditable directly to your li
http://jsfiddle.net/X8nLR/
<li contenteditable="true"></li>
OR if your really like your div go for
http://jsfiddle.net/QXeA3/
div {
display: inline-block;
width: 100%;
}
You can set the display property of li to block
li {
display: block
}
See http://jsfiddle.net/4nWJ2/3/
EDIT: Above solution removes the decimal index of the list.
Here's another possible solution (assuming you'll only have one contenteditable item per list item)
li {
position: relative;
}
li [contenteditable] {
position: absolute;
top: 0;
}
See working fiddle: http://jsfiddle.net/4nWJ2/4/
Just add display: inline; to your CSS:
<body>
<ol>
<li>
<div contenteditable="true" style="display: inline;"></div>
</li>
</ol>
</body>
JSFiddle: http://jsfiddle.net/w3phy/
Okay so here is the link to the page I'm working on:
http://students.thenet.ca/jlandon/
As you can see, the list is still displaying vertically instead of horizontally.
CSS:
li { display:inline;
list-style-type:none;
}
#nav { background-color:#c6c7c3;
height:50px;
margin-top:120px;
z-index:2;
}
HTML
<div id="nav">
<ul>
<li><h2>Home</h2></li> <li><h2>About</h2></li> <li><h2>School</h2></li> <li><h2>Workshop</h2></li> <li><h2>Contact</h2></li>
</ul>
</div>
Okay now I see why that wasn't working (H1-6 are blocks) so here is the specifics of what I want the navigation to look like (please help me):
site design http://students.thenet.ca/jlandon/images/sitedesign.png
Why are you using H2 for the navigation elements?
Change them to also display inline, or use an inline element.
h2 is a block element by default, which is what's breaking your lines.
You can fix it by either setting display: inline on the h2s (probably not a great idea) or by replacing the h2s with something else (like just styling the a tag to be the size and font etc you want).
I think a float: left would fix this:
li
{
display:inline;
float: left;
list-style-type:none;
}
You should consider using semantic classes instead of using block elements like h2 in your navigation. If by using the h2 element, you want a bold font with a certain size then you should consider this:
.nav-text, #nav li a {
font-size: 1.25em;
font-weight: bold; }
#nav {
background-color: #c6c7c3;
height: 50px;
margin-top: 120px;
z-index: 2; }
Also notice that I use em instead of pixels. This will help in responsive design if you decide in the future to extend the page to mobile sites.
Your html will something like this:
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>School</li>
<li>Workshop</li>
<li>Contact</li>
</ul>
</div>
As you can see in this example http://jsfiddle.net/PCcj8/ I'd like to add some margin to my unordered list. However, I'm not able to move that list because of that img float. How can I achieve it? Please consider there can be different images of different widths.
Wrap your <ul> tag in a <span> tag <span> tag like this:
<span>
<ul>
<li>test</li>
<li>test</li>
</ul>
</span>
and then style the span like this:
span{
display: inline-block;
margin-left: 20px;
}
New style definition for that UL:
ul {
margin: 0 0 0 -5px; display: inline-block;
}
It leaves a LITTLE bit of an indent for the line item, and it will move along with any images you may put to the side.
Here's a forked fiddle: enter link description here
I have a rows of data in div tags that float left and have widths set. They are inside li tags. Everything works fine in chrome and FF, but in IE8 the numbers show up in the middle of my rows, right next to the last div tag that doesn't have a float left.
The lists are created dynamically so I'll try to recreate an example.
<ol id='list'>
<li>
<div id='d1'>data</div>
<div id='d2'>data2</div>
</li>
</ol>
The css would look something like
#d1{
float:left;
width:50px;
}
#d2{
width:40px;
}
This is my first question on here hopefully it is clear enough.
All of the divs that belong on a particular row should be left floated and the container should be either an inline block or regular block.
for example:
<style>
.column { float:left; }
#d1 { width: 50px; }
#d2 { width: 40px; }
li {display: inline-block;}
br { clear: both; }
</style>
<li>
<div class="column" id="d1">data</div>
<div class="column" id="d2">data2</div>
</li>
<br>
<li>
<div class="column" id="d1">data</div>
<div class="column" id="d2">data2</div>
</li>
Most likely you have either an invalid doc type or have selected one that causes quirks mode which is why it works in some of the browsers.