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;
}
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 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.
I have been trying to learn horizontal lists in html. I have the following code,
CSS:
#list li
{
text-decoration:none;
display: inline;
list-style-type: none;
padding-right: 20px;
}
</style>
HTML:
<div >
<ul id="list">
<li>Store </li>
<li>Mac </li>
<li>IPod </li>
<li>IPhone </li>
<li>IPad </li>
<li>ITunes </li>
<li>Support </li>
</ul>
</div>
When I put the id in the div tag (<div id="list">)then it does not show the list horizontally while the current code displays the list horizontally. I don't get the reason behind it. Please help me clear the concept. Thanks
Because a div is not a list element. It has no list-style-type, so it won't change the bullets on any lists within the div. And an 'inline' display type does not propagate down the DOM tree from a parent node, so the inline applies only to the div itself and won't affect the list or li elements.
It works just fine if you put the ID on the div element as well.
Have a look at this fiddle: http://jsfiddle.net/sKaYm/
Your CSS selector #list li says "apply this to any list element that is child of an element with ID 'list' - no matter if it is an immediate child or not." - So basically it doesn't matter how many levels of div's or other elements you wrap around your list, it will still select it.
According to this jsFiddle it works.
list-style-type only changes the marker in front of the item.
to create cross browser horizontal list add float left to each list item :
#list li
{
text-decoration:none;
display: inline;
list-style-type: none;
padding-right: 20px;
float:left;
}