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.
Related
I'm trying to make a sidebar navigation list containing another list whose contents show/hide when clicked. For the li containing the collapsible list, I put in a custom list-style-image (actually, two that are toggled between with JS when clicked.) The problem is that the custom image is rendering on the edge of the page instead of in line where a regular bullet point would be. The image has a transparent background, so that's not the problem. Maybe it's something with how I floated the div to the left?
Here's my HTML and CSS and a screenshot of how it's displaying.
Code snippets (css/html):
#sidebar{
position: fixed;
float: left;
width: 20%;
background-color: green;
}
#main{
float: right;
width: 75%;
background-color: blue;
}
#songs{
margin-bottom: 0;
}
.song{
list-style: decimal;
}
.songclosed{
display: none;
}
.closed{
list-style-image: url("../images/closed.png");
}
.open{
list-style-image: url("../images/open.png");
}
<div id="sidebar">
<ul>
<li>
<p>Home</p>
</li>
<li>
Info
</li>
<li id="openclose" class="closed" onclick="openclose()">
<p id="songs">Songs</p>
<ol>
<li class="song songclosed">
Song 1
</li>
<li class="song songclosed">
Song 2
</li>
<li class="song songclosed">
Song 3
</li>
</ol>
</li>
</ul>
</div>
Image--See the little black triangle on the left?
I've tried list-style-position: inside and overflow: hidden. Both made a difference, but neither worked properly.
Final note: The images are bigger (100x100) than a regular bullet point so that may be a slight problem, but I can edit them down and see what changes if someone can tell me how big a regular bullet is.
I am creating a horizontal list. Here is my html:
<ul class="deals">
<li>test</li>
<li>fads</li>
<li>asdf</li>
</ul>
And here is the css:
ul.deals {
list-style-type: none;
}
ul.deals li {
display: inline;
padding: 10px 20px;
}
If I add a div inside of the list, then it does not show horizontally anymore. Here is the new html:
<ul class="deals">
<li>
<div>test</div>
</li>
<li>
<div>fads</div>
</li>
<li>
<div>asdf</div>
</li>
</ul>
What about the div changes the output? Also, how would I fix this?
As already mentioned, divs are block level elements.
What are you trying to achieve by nesting a div? If you don't need a dimensional container just use a <span> rather than using a <div> styled with display: inline. Reason: spans are inline by nature and won't need additional css to make them so.
If you want a dimensional container while still retaining your horizontal structure you can use either a <span> or <div> as long as you assign display: inline-block
Even better, style the list item itself with display: inline-block. That way you don't need the nested DOM element.
As gillesc said, DIV tags are block level. Try the following dubious code in your css
ul.deals div {display: inline}
You could possibly use inline-block instead
I struggled for this issue for hours, but can't get it work still.
I have the html code like this :
<ul>
<li><div>aa</div><div>aa11</div><li>
<li><div>bb</div><div>bb11</div><li>
</ul>
I wondered how to use css to let the <div> display in one line each li. But the <ul><li> label still have its vertical style.
I am new to CSS, and any help will be thankful.
ul li{
display: table;
}
ul li div{
float: left;
}
This will make the <div> inside the <li> to look side by side.
You might also want to add
list-style-type: none;
in order to get rid of the bullet-points. In addition to what #Viswalinga Surya S said
Doing that, would give you this --> http://jsfiddle.net/A35Fe/
It looks like you forgot to close your <li> tags, you have opening <li> tags but you didn't close them with </li>. If you want to make aa and aa11 side-by-side you also need to add a display: inline-block; style to your divs. Here's a demonstration: http://jsfiddle.net/5wLku/
Here's my solution:
<ul>
<li><div>aa</div><div>aa11</div></li>
<li><div>bb</div><div>bb11</div></li>
</ul>
<li style="float:left"><div>aa</div><div>aa11</div></li>
and end your list items with
</li> not with <li>
I have Updated your code, Here is the JSFiddle link and let me know if you want more change:
http://jsfiddle.net/h5bMa
HTML:
<ul>
<li><div>aa</div><div>aaa1</div></li>
<li><div>bb</div><div>bbb1</div></li>
</ul>
CSS:
ul li{
float: left;
}
I am trying to find a way to line up specific text on the right side of a div, while the rest of the text stays on the left.
I would like it to be better formatted so that the prices line up on the right, and not bunched up on the other text.
Is there a way to do this without tables? I have 3 divs containing similar information that are all floated left next to each other. I have looked for text spacing, line spacing and text formatting and couldn't find anything specifically for this issue.
Thanks for your help
Styled unordered lists and labels make good companions. You can adjust the margins on the list items to control the spacing if you want as well.
<div class="prices">
<h2>Rates</h2>
<ul>
<li>
<label>Day Pass:</label> $20
</li>
<li>
<label>Month Pass:</label> $20
</li>
<li>
<h3>Personal Training</h3>
</li>
<li>
<label>Something:</label> $20
</li>
<li>
<label>Something else:</label> $20
</li>
</ul>
</div>
CSS:
.prices h2 {
text-align:center
}
.prices ul, .prices li {
list-style:none;
margin:0;
padding:0
}
.prices label {
display:block;
float:left;
margin-left:120px;
margin-right:10px;
}
.prices h3 {
margin-left:100px;
}
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.