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;
}
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 have a div with overflow-x:scroll; and in that div I have a list, and that list have some links. But I don't seem to be able to make my list a wide as its links. Which results in my links jumping lines.
How would I fix this?
My html
<div class="menu">
<ul>
<li>
a long text that jumps lines
</li>
<li>
a line that don't jump
</li>
</ul>
</div>
My CSS
.menu{
width:400px;
overflow-x:scroll;
}
When you say Which results in my links jumping lines I guess is breaking in a new line, then you can use this property to avoid that:
.menu ul li {
white-space:nowrap;
}
Also to make your ul get the full width change his display property:
.menu ul {
display:inline-block;
}
The demo http://jsfiddle.net/5KSaM/7/
I have a list i want to add to a <div>. Each listitem contains a <div> which in turn contain an image and a text string. The list must be vertical. I ve tried putting display:block for the <ul> with width:100% but the list is flowing left to right horizontally. How do I make the list vertical?
Try putting display: block in the <li> tags instead of the <ul>
I would add this to the LI's CSS
.list-item
{
float: left;
clear: left;
}
Hope this is your structure:
<ul>
<li>
<div ><img.. /><p>text</p></div>
</li>
<li>
<div ><img.. /><p>text</p></div>
</li>
<li>
<div ><img.. /><p>text</p></div>
</li>
</ul>
By default, it will be add one after another row:
-----
-----
-----
if you want to make it vertical, just add float left to li, give width and height, make sure that content will not break the width:
| | |
| | |
li
{
display:block;
float:left;
width:300px; /* adjust */
height:150px; /* adjust */
padding: 5px; /*adjust*/
}
CSS
li {
display: inline-block;
}
Works for me also.
Long time reader, first time post :) Any good ideas for this? :
I have 4 <li> elements displaying as inline-block.
These elements each contain a mix of elements.
3 contain an <h3> and a <div>.
1 contains an <q>, a <strong> and a <a>.
My question: how can I vertically align the text of these elements without placing any restrictions on the amount of text within, or without knowing the amount of text within in advance? As the text length increases, shorter columns drop with the bottom of the <ul> when I want them to remain at the top!
the code and result can be viewed here:
http://jsfiddle.net/m6HG5/5/
Thanks!
Assuming I am understanding your question properly, you need to specify the line-height of your UL element:
<ul>
<li><h3>List Item 1</h3></li>
<li><strong>List Item 2</strong></li>
<li>List Item 3</li>
</ul>
And the styling:
ul {
line-height:1em;
}
li {
float:left;
vertical-align:middle;
padding:5px;
display:block;
}
h3 {
font-size:1.5em;
}
strong {
font-weight:bold;}
http://jsfiddle.net/m6HG5/3/
I'm having an issue with correctly presenting items in an unordered list. The labels are floating left and the related spans that are long in length are wrapping and showing below the label. I need a solution that keeps the related spans in their respective columns. In other words, I don't want long spans to show under the labels. What property can I take advantage of so that I get the desired layout in all of the popular browsers, including IE6? Thanks in advance for the help.
My code is as follows:
<ul>
<li>
<label>Name</label>
<span><%= Html.Encode(Model.Name) %></span>
</li>
<li>
<label>Entity</label>
<span><%= Html.Encode(Model.Entity) %></span>
</li>
<li>
<label>Phone</label>
<span><%= Html.Encode(Model.Phone) %></span>
</li>
</ul>
My CSS styling is as follows:
ul
{
display:block;
list-style-type:none;
margin:0;
padding:0;
}
ul li label
{
float:left;
width:100px;
}
This works in Firefox. It should also work in IE6.
ul li span {
display: block;
margin-left: 100px;
}